Open model popup in Angular 9 using @ng-bootstrap NgbModal

Modal Popup In Angular Framework

Modal Popup is also known as Model Window. The defination is a graphical control element subordinate to an application's main window.

We are implementing model popup in angular 7 using NgbModal. please follow the steps to create model popup in your html.

Prerequisite

1. Angular CLI to install angular cli in your system follow this article.
2. Install @ng-bootstrap/ng-bootstrap package.

Setup

1) Add this code on html file

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
  <p> This is the demo of model popup using NgbModal. </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Close</button>
  </div>
</ng-template>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>
<hr>
<pre>{{closeResult}}</pre>

2) And use this typescript code for running model popup

import {NgbModal, ModalDismissReasons} from '@ng-bootstrap/ng-bootstrap';

closeResult: string;

constructor(private modalService: NgbModal) {}

open(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
}

Output of the above program

To see more examples by using @ng-bootstrap click here.