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

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

<!-- Get Data HomeComponent used MODAL_DIALOG_DATA -->
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.