Angular 11 Bootstrap 4 Modal Popup Tutorial Example

Angular 11 Bootstrap modal popup tutorial; Throughout this tutorial, you will find out how to create Bootstrap Modal in Angular 11 application using the ng-bootstrap package.

Ideally, the modal popup is a primary user interface component used to display essential information over the existing web page; in this example, you will learn to use a bootstrap modal in the angular platform to display primary data to users.

To create a model popup, we will use the Bootstrap 4 package; additionally, we will install it into the angular project and take the Ng Bootstrap library’s help to create a modal popup in angular.

The ng-boottrap package offers tons of reusable Bootstrap widgets; this library doesn’t require any third-party JavaScript dependencies and makes your development work facile.

Here are the instructions that will help you integrate modal in angular with bootstrap:

Angular 11 Bootstrap 4 Modal Popup Integration Example

  • Step 1: Install Angular App
  • Step 2: Add Bootstrap Package
  • Step 3: Set Up NgBootstrap
  • Step 4: Register NgbModule in Main Module
  • Step 5: Implement Modal Popup in Angular
  • Step 6: Update TypeScript Template
  • Step 7: Start Development Server

Install Angular App

Make sure you have an angular command-line interface tool added to your development system. However, if not, then you can execute the recommended command from the terminal.

npm install -g @angular/cli

Now, you are allowed to go to the next step, hence use the given below command to create an angular app:

ng new ng-demo-app

Move to the project root:

cd ng-demo-app

Add Bootstrap Package

Next, again on the console type npm command to install bootstrap package, this package will be the basic building block of angular modal popup example.

npm install bootstrap

Subsequently, add the bootstrap CSS inside the angular.json file as we have shown in the example code below:

...
...
],
"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]
...
...

Set Up NgBootstrap

Let us execute the displayed command and add the NgBootstrap library into the angular project; theoretically, this package is used with Bootstrap in angular.

npm install @ng-bootstrap/ng-bootstrap

Register NgbModule in Main Module

Get inside the app/app.module.ts file, import NgbModule from the ‘@ng-bootstrap/ng-bootstrap’ package, plus add the module into the imports array.

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

Implement Modal Popup in Angular

Create a button call the triggerModal() method using the click event, plus pass the modal id to it. The ng-template directive evokes the modal popup; apparently, it is more identical to the bootstrap modal HTML structure.

Open and insert given code in app/app.component.html file:

<button class="btn btn-danger" (click)="triggerModal(modalData)">Open Modal</button>

<ng-template #modalData let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Angular Bootstrap Modal Popup</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">
    <p><strong>Are you sure you want to delete <span class="text-primary">"Agatha Harkness"</span> profile?</strong></p>
    
    <p>All data related to west view profile will be removed permanently.
    </p>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-danger" (click)="modal.close('Save click')">Close</button>
  </div>
</ng-template>

Update TypeScript Template

Open and update suggested code in app/app.component.ts file:

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


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent {

  closeModal: string;
  
  constructor(private modalService: NgbModal) {}
    
  triggerModal(content) {
    this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((res) => {
      this.closeModal = `Closed with: ${res}`;
    }, (res) => {
      this.closeModal = `Dismissed ${this.getDismissReason(res)}`;
    });
  }
  
  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}`;
    }
  }

}

Start Development Server

Type ng serve command on the console and invoke the angular development sever:

ng serve

Test the modal in the angular app with suggested url:

http://localhost:4200

Image Upload in Angular

Conclusion

The Angular Bootstrap modal popup tutorial is over; In this example, we shared how to implement the Bootstrap Modal popup in the Angular application and how to use it to display important information over the web page with the help of the ng-bootstrap library.