Angular Modal Popup Example

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

Table of Contents

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

Installation

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

setup

```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 { RouterOutlet } from '@angular/router';
import { ModalOpenComponent, ModalService } from 'modal-popup-angular-18';
import { HomeComponent } from './home/home.component';

@Component({
selector: 'app-root',
standalone: true,
imports: [RouterOutlet,HomeComponent, ModalOpenComponent],
templateUrl: './app.component.html',
styleUrl: './app.component.scss',
providers:[ModalService]
})
export class AppComponent {
title = 'angular-tour-of-heroes';
constructor(public modal:ModalService){}

open(){
this.modal.open(HomeComponent,{title:"kljaskldasdsa",body:"",data:{name:"Helloo"}})
}
}
``

usage

``bash

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

@Component({
selector: 'app-home',
standalone: true,
imports: [],
templateUrl: './home.component.html',
styleUrl: './home.component.scss',
providers: [ModalService]
})
export class HomeComponent 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.