Share and Learn To Write Code!

Programming articles, which help you to build your application. If something you are stuck to code and complete the program, just find here your question-related articles.

Share with   

Open model popup in Angular 6 | 7 | 8 | 9 using @ng-bootstrap NgbModal

We are going to implement small angular program to open student detail in using model popup. to open this model popup we are implementing @ng-bootstrap NgbModel.
Angular 7   Angular 8   angular 9   javascript   modal popup  

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. If you dont know how to use ng-bootstrap plesae check this article.


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.

0replies
Leave a reply
46
Registerd Users
88
Total Subscribers
59
Total Articles
42092
Total Views