Use of Ngx-Bootstrap Modal Popup in Angular 8

Introduction

 
Ngx-Bootstrap has given a package for an open-source tool which a native Angular directive for Bootstrap 3 and 4. It contains all core components powered by Angular. In this article, we will learn about the Modal component, which is a cool feature of Ngx-bootstrap.
 

What is a Modal Popup?

 
A modal is a component that is displayed as a popup dialog box over the page.
 
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed
Step 1
 
Let's create a new Angular project using the following NPM command:
 
ng new modal-example
 
Step 2
 
Now, let's create a new component using the following command:
 
ng g c ngx-bootstrap-modal
 
Step 3
 
Install ngx-bootstrap from npm using the following command:
  1. npm install ngx-bootstrap --save
Or
 
ng add ngx-bootstrap --component modal
 
This will be added to our root module
 
Step 4
 
Now let's add bootstrap styles in our index.html file.
 
For Bootstrap 3
 
<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">
 
For Bootstrap 4
 
<linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"rel="stylesheet">
 
Step 5
 
Let add the template in our ngx-bootstrap-modal.component.html.
  1. <h2 style="text-align: center;">Example of Ngx-Bootstrap Modal</h2>  
  2. <div style="width: fit-content;margin: auto;margin-top: 18px;">  
  3.   <button type="button" class="btn btn-primary" (click)="openModalWithClass(template)">Open modal</button>  
  4. </div>  
  5.   
  6. <br>  
  7.    
  8. <ng-template #template>  
  9.   <div class="modal-header">  
  10.     <h4 class="modal-title pull-left">Modal</h4>  
  11.     <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">  
  12.       <span aria-hidden="true">×</span>  
  13.     </button>  
  14.   </div>  
  15.   <div class="modal-body">  
  16.     <h3>List of my upcomming articles in C# Corner</h3>  
  17.     <ul>  
  18.       <li>Use of Ngx-Bootstrap Modal in Angular 8</li>  
  19.       <li>Use of Ngx-Bootstrap Progres Bar in Angular 8</li>  
  20.       <li>Use of Ngx-Bootstrap Datepicker in Angular 8</li>  
  21.       <li>Use of Ngx-Bootstrap Timepicker in Angular 8</li>  
  22.       <li>Use of Ngx-Bootstrap Dropdown in Angular 8</li>  
  23.       <li>Use of Ngx-Bootstrap Sortable in Angular 8</li>  
  24.       <li>Use of Ngx-Bootstrap Collapse in Angular 8</li>  
  25.       <li>Use of Ngx-Bootstrap Carousel in Angular 8</li>  
  26.       <li>Use of Ngx-Bootstrap Typehead in Angular 8</li>  
  27.        
  28.     </ul>  
  29.     <h3>You can check my all C# Corner Articles <a href="https://www.c-sharpcorner.com/members/siddharth-gajbhiye">here</a></h3>  
  30.   </div>  
  31.   <div class="modal-footer">  
  32.     <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>  
  33.   </div>  
  34. </ng-template>  
Step 6
 
Now, open the ngx-bootstrap-modal.component.ts file and add the following code in this file:
  1. import { Component, OnInit, TemplateRef } from '@angular/core';  
  2. import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';  
  3.   
  4. @Component({  
  5.   selector: 'app-modal-popup',  
  6.   templateUrl: './modal-popup.component.html',  
  7.   styleUrls: ['./modal-popup.component.css']  
  8. })  
  9. export class ModalPopupComponent implements OnInit {  
  10.   modalRef: BsModalRef;  
  11.   constructor(private modalService: BsModalService) { }  
  12.   
  13.   ngOnInit() {  
  14.   }  
  15.   openModalWithClass(template: TemplateRef<any>) {  
  16.     this.modalRef = this.modalService.show(  
  17.       template,  
  18.       Object.assign({}, { class'gray modal-lg' })  
  19.     );  
  20.   }  
  21. }  
The below code is opening the modal popup:
  1. this.modalRef = this.modalService.show(template)    
 And the below code is to hide the opened modal:
  1. this.modalRef.hide();  
Here #template is the template reference which works like a trigger for the modal popup. With that, the template reference name modal is popping up.
 
Step 7
 
Now, open the app.component.html file and add the following code:
  1. <app-modal-popup></app-modal-popup>  
Step 8
 
Let's open the app.module.ts file and add the following code:
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
  4. import { AppComponent } from './app.component';   
  5. import { ModalPopupComponent } from './modal-popup/modal-popup.component';  
  6. import { ModalModule } from 'ngx-bootstrap/modal';  
  7.   
  8. @NgModule({  
  9.   declarations: [  
  10.     AppComponent,  
  11.     ModalPopupComponent
  12.   ],  
  13.   imports: [  
  14.     BrowserModule,  
  15.     ModalModule.forRoot(),  
  16.     FormsModule,  
  17.     ReactiveFormsModule,  
  18.   ],  
  19.   bootstrap: [AppComponent]  
  20. })  
  21. export class AppModule { }  
Now its time for the Output:
 
 Use Of Ngx-Bootstrap Modal Popup In Angular 8
Use Of Ngx-Bootstrap Modal Popup In Angular 8
 

Conclusion

 
In this article, we have seen the Ngx-Bootstrap Modal Popup in Angular 8 Application.
 
Please give your valuable feedback/comments/questions about this article, and please let me know how to improve it.