Angular Modal Popup Example

This project demonstrates how to implement modal popups in an Angular application using the modal-popup-angular-14 package.

Table of Contents

- Installation
- Setup
- Usage
- Component Example
- Complete Code Structure
- Live Demo
- License

Installation

To install the modal-popup-angular-14 package, run the following command:
npm i modal-popup-angular-14@latest

setup

```bash
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ModalPopUpModule } from 'modal-popup-angular-14';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
declarations: [
AppComponent,
Test1Component,
],
imports: [
BrowserModule,
AppRoutingModule,
ModalPopUpModule,
BrowserAnimationsModule
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule { }
``

usage

``bash
interface ModalOptions {
title?: string;
body?: string;
data?: any;
size?: {
minWidth?: string;
width?: string;
maxWidth?: string;
minHeight?: string;
height?: string;
maxHeight?: string;
};
}
import { Component } from '@angular/core';
import { Test1Component } from './test1/test1.component';
import { ModalService } from 'modal-popup-angular-14';
import { ReactiveJsonFormsService } from 'json-reactive-form-angular-14';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
title = 'angular-tour-of-heroes';
constructor(public modal: ModalService) { }

OpenPopUp() {
this.modal.open(Test1Component, { title: "Test Compoments", body: "kaise hoo Aap", data: {} })
}
}


import { Component, OnInit } from '@angular/core';
import { ModalService,DATA_MODAL_DIALOG_DATA } from 'modal-popup-angular-14';

@Component({
selector: 'app-test1',
templateUrl: './test1.component.html',
styleUrls: ['./test1.component.scss']
})
export class Test1Component implements OnInit {

constructor(public modal: ModalService, @Inject(DATA_MODAL_DIALOG_DATA) public modalData: any) { }

ngOnInit(): void {
console.log(this.modalData, "DATA_MODAL_DIALOG_DATA")
}
}
```

Live Demo

You can view and run the example project live on StackBlitz: link.