Hello Devs,

In this tutorial, we are going to learn angular 10 bootstrap modal popup example.

Ng Bootstrap is developed from bootstrap and they provide all bootstrap 3 and bootstrap 4 native Angular 10 directives like model, pagination, datepicker, buttons etc.

Follow this step by step guide given below:

Create New App

ng new my-new-app

Install Bootstrap 4

npm install bootstrap --save



    "styles": [





Install Ng Bootstrap

npm install --save @ng-bootstrap/ng-bootstrap

Import Module


import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';


import {NgbModule} from '@ng-bootstrap/ng-bootstrap';



  declarations: [



  imports: [




  providers: [],

  bootstrap: [AppComponent]


export class AppModule { }

Updated View File


<h1>Angular 10 Bootstrap Modal Popup Example</h1>


<button class="btn btn-lg btn-outline-primary" (click)="open(mymodal)">Open My Modal</button>


<ng-template #mymodal let-modal>

  <div class="modal-header">

    <h4 class="modal-title" id="modal-basic-title">Bootstrap Modal</h4>

    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">

      <span aria-hidden="true">×</span>



  <div class="modal-body">

    This is example from Rathorji.in


  <div class="modal-footer">

    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>



Use Component ts File


import { Component } from '@angular/core';


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



  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']


export class AppComponent {

  title = 'appBootstrap';


  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}`;




Run this command:

ng serve

I hope this example helps you.