Modal popup Bootstrap in Angular 8 Project

Let’s install Bootstrap by running following NPM command. This will install the latest bootstrap version ( Current is 4.3.1 )

1 2	$ npm install --save @ng-bootstrap/ng-bootstrap

ng-bootstrap includes UI components only, so for adding styling to these components we need to include CSS styling file in the index.html at Angular project root

1 2	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >

Import NgbModule( Bootstrap module ) & FormsModule( for Angular as we will use [(ngModel)] ) in the app.module.ts file

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';   import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';   import { NgbModule } from '@ng-bootstrap/ng-bootstrap';   @NgModule({   declarations: [     AppComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     NgbModule   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

Use Angular Bootstrap Modal in Component using Template

To Bootstrap modals in components add an ng-template container with the let-modal directive and a TemplateRef variable #mymodal

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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">&times;</span>     </button>   </div>   <div class="modal-body">     Here I am!   </div>   <div class="modal-footer">     <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>   </div> </ng-template>

To open this modal add following button with a (click) event calling the open method which is passing the TemplateRef.

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

In the component class import NgbModal , ModalDismissReasons and NgbModalOptions classes. Also, add NgbModal in class constructor to provide its methods.

// app.component.ts

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

 

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

 

@Component({

  selector: 'app-root',

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

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

})

export class AppComponent {

  title = 'ng-bootstrap-modal-demo';

  closeResult: string;

  modalOptions:NgbModalOptions;

 

  constructor(

    private modalService: NgbModal

  ){

    this.modalOptions = {

      backdrop:'static',

      backdropClass:'customBackdrop'

    }

  }

  

  open(content) {

    this.modalService.open(content, this.modalOptions).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}`;

    }

  }

}

 

NgbModal provides from methods

open: Opens a new modal window with the specified content and supplied options.

dismissAll: Dismisses all currently displayed modal windows with the supplied reason.

hasOpenModals: Indicates if there are currently any open modal windows in the application.

ModalDismissReasons: It is used to identify the method used to close the modal ie. using ESC key or clicking on Babkdrop area.

NgbModalOptionsis used to configure Modal which can have the following properties:

backdrop: It is the shadow created on Modal back, default is true, if set to 'static' then Modal doesn’t close on clicking outside.

backdropClass: Append custom class to modal backdrop element.

beforeDismiss: Callback triggered before modal is dismissed.

centered: If set to true modal is vertically centered, default is false.

container: To specify the element to which new modal is appended, the default is the body.

size: Modal window size can be set with "sm" | "lg" | "xl"

Open Model using Component

Instead of added NgTemplate in the same component which we did above, we can have a separate component to show Modal content for that we simply pass our Modal Component in open method.

Check below steps to create:

Step 1) Run following NG command to create a new component mymodalcomponent 

1 2	$ ng generate component mymodalcomponent

Step 2) Open app.module.ts file to add mymodalcomponent in the declarations as well as in the entryComponents array:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

// app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';   import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component';   import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; import { MymodalComponent } from './mymodal/mymodal.component';   @NgModule({   declarations: [     AppComponent,     MymodalComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     NgbModule   ],   entryComponents:[     MymodalComponent   ],   providers: [],   bootstrap: [AppComponent] }) export class AppModule { }

Step 3) In the mymodal.component.ts import NgbActiveModal to use modal methods. Here we are getting Title and Content as dynamic values sent from App component using @input decorators

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

// mymodal.component.ts import { Component, OnInit, Input } from '@angular/core'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; @Component({   selector: 'app-mymodal',   templateUrl: './mymodal.component.html',   styleUrls: ['./mymodal.component.css'] }) export class MymodalComponent implements OnInit {     @Input() my_modal_title;   @Input() my_modal_content;     constructor(public activeModal: NgbActiveModal) {}     ngOnInit() {   }   }

Step 4) Update mymodal.component.html file with below code. This will show dynamic Title and Content.

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="modal-header">     <h4 class="modal-title">{{my_modal_title}}</h4>     <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">       <span aria-hidden="true">&times;</span>     </button>   </div>   <div class="modal-body">     <p> {{my_modal_content}}</p>   </div>   <div class="modal-footer">     <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>   </div>

Now we will call from App component having a template button withopen method:

1 2	<button class="btn btn-lg btn-outline-primary" (click)="open()">Launch demo modal</button>

In app.component.ts file add the open method declaration as shown below:

1 2 3 4 5 6

open() {     const modalRef = this.modalService.open(MymodalComponent);     modalRef.componentInstance.my_modal_title = 'I your title';     modalRef.componentInstance.my_modal_content = 'I am your content';   }