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

angular.json

.....

    "styles": [

      "node_modules/bootstrap/dist/css/bootstrap.min.css",

      "src/styles.css"

    ],

.....



Install Ng Bootstrap

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



Import Module

src/app/app.module.ts 


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

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

  

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

  

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

   

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    BrowserModule, 

    NgbModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }



Updated View File

src/app/app.component.html

<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>

    </button>

  </div>

  <div class="modal-body">

    This is example from Rathorji.in

  </div>

  <div class="modal-footer">

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

  </div>

</ng-template>



Use Component ts File

src/app/app.component.ts

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

  

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

  

@Component({

  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.