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

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

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: {} })
  }
}

<!-- Get Data Test1Component used MODAL_DIALOG_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.