Share with   

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

We are going to implement angular application to open student detail in using model popup. To open this model popup we are implementing @ng-bootstrap NgbModel.

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.



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



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>
  <div class="modal-body">
  <p> This is the demo of model popup using NgbModal. </p>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Close click')">Close</button>
<button class="btn btn-lg btn-outline-primary" (click)="open(content)">Launch demo modal</button>


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) {, {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.

Author Image
Guest User