AgularPopupModal

Angular Version Support

It work for Angular version > 15.

Installation

Run npm i angular-popup-modal to add package to your project.

Examples

Step 1: Include import { AngularPopupModalService } from 'angular-popup-modal' to your popup source component.

Step 2: Create a component (ModalComponent) for modal which you will be passing as modal.

Step 3: Inject AngularPopupModalService to you source component.

import { Component } from '@angular/core';
import { AngularPopupModalService } from 'angular-popup-modal';
import { ModalComponent } from './modal.component';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'popup-modal';
  modalRef: any;
  constructor(private ams: AngularPopupModalService) { }
  open() {
    this.modalRef = this.ams.loadModal(ModalComponent, { title: "Modal", width: "800px", cancelBtnLabel: "close", okBtnLabel: "ok" });
    this.modalRef.onClose.subscribe((m: any) => {
      console.log("Close", m);
      this.ams.close(true);
    });
  
    this.modalRef.onOk.subscribe((m: any) => {
      console.log("Ok", m)
      this.ams.close(true);
    })
  }
}

You can pass data for modal like title, width and buttons text

Closing Modal

To close popup-modal you need to call close() method from service AngularPopupModalService with boolean value

How to get data after every action

After loading modal, You can subscribe to the modalRef method onClose, onOk and you will be able to get updated data