Ngx-Bootstrap Modal Popup in Angular

Step 1

NPM command :

ng new modal-example

Step 2

create a new component :

ng g c ngx-bootstrap-modal

Step 3

Install ngx-bootstrap from npm using command :

npm install ngx-bootstrap --save

Step 4

  • Now let’s add bootstrap styles in our index.html file.
For Bootstrap 4 :-
Step 5
  • Let add the template in our ngx-bootstrap-modal.component.html.
<h2 style="text-align: center;">Example of Ngx-Bootstrap Modal</h2>  
<div style="width: fit-content;margin: auto;margin-top: 18px;">  
  <button type="button" class="btn btn-primary" (click)="openModalWithClass(template)">Open modal</button>  
<ng-template #template>  
  <div class="modal-header">  
    <h4 class="modal-title pull-left">Modal</h4>  
    <button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">  
      <span aria-hidden="true">×</span>  
  <div class="modal-body">  
    <h3>List of my upcomming articles in C# Corner</h3>  
      <li>Use of Ngx-Bootstrap Modal in Angular 8</li>  
      <li>Use of Ngx-Bootstrap Progres Bar in Angular 8</li>  
      <li>Use of Ngx-Bootstrap Datepicker in Angular 8</li>  
      <li>Use of Ngx-Bootstrap Timepicker in Angular 8</li>  
      <li>Use of Ngx-Bootstrap Dropdown in Angular 8</li>  
      <li>Use of Ngx-Bootstrap Sortable in Angular 8</li>  
      <li>Use of Ngx-Bootstrap Collapse in Angular 8</li>  
      <li>Use of Ngx-Bootstrap Carousel in Angular 8</li>  
      <li>Use of Ngx-Bootstrap Typehead in Angular 8</li>  
    <h3>You can check my all C# Corner Articles <a href="">here</a></h3>  
  <div class="modal-footer">  
    <button type="button" class="btn btn-default" (click)="modalRef.hide()">Close</button>  
Step 6
  • Now, open the ngx-bootstrap-modal.component.ts file and add the following code in this file:
import { Component, OnInit, TemplateRef } from '@angular/core';  
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';  
  selector: 'app-modal-popup',  
  templateUrl: './modal-popup.component.html',  
  styleUrls: ['./modal-popup.component.css']  
export class ModalPopupComponent implements OnInit {  
  modalRef: BsModalRef;  
  constructor(private modalService: BsModalService) { }  
  ngOnInit() {  
  openModalWithClass(template: TemplateRef<any>) {  
    this.modalRef =  
      Object.assign({}, { class: 'gray modal-lg' })  
  • The below code is opening the modal popup:
this.modalRef =
  • And the below code is to hide the opened modal:

Step 7

  • Now, open the app.component.html file and add the following code:

Step 8

  • Let’s open the app.module.ts file and add the following code:
import { BrowserModule } from '@angular/platform-browser';  
import { NgModule } from '@angular/core';  
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
import { AppComponent } from './app.component';   
import { ModalPopupComponent } from './modal-popup/modal-popup.component';  
import { ModalModule } from 'ngx-bootstrap/modal';  
  declarations: [  
  imports: [  
  bootstrap: [AppComponent]  
export class AppModule { }

Output :-

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories