Angular 12 modal popup example with Bootstrap 4

Angular 12 Bootstrap modal example tutorial; In this tutorial you will learn how to create a modal popup with Bootstrap 4 in angular 12. The modal popup is a dialog box/popup window that is displayed on top of the current page

To create a modal popup in Angular 12, we will use a bootstrap 4 package, additionally we will install ng-bootstrap to help integrate modal in angular 12, The ng-bootstrap offers a many reusable widgets, for this widget we don’t require any third-party library.

For implement a bootstrap modal popup in Angular application simply follow below steps, we assume the you have already installed Angular-cli

You can download the working example https://github.com/technostuf/angular12-bootstrap-modal-popup-example

Angular 12 modal popup example with Bootstrap 4

Step 1 – Create a new Angular 12 app
Step 2 – Install Bootstrap 4 package
Step 3 – Install the ng-bootstrap package
Step 4 – Import the modules
Step 5 – Add code in the view file
Step 6 – Add code in Typescript component .ts file
Step 7 – Run an Angular 12 application

Step 1 – Create a new Angular 12 app

First of all, open your terminal and execute the following command to create a new Angular 12 app.

  ng new angular-app

Step 2 – Install Bootstrap 4 package

In this step we will install a core bootstrap library to use bootstrap UI CSS and basic building blocks

 npm install bootstrap --save

After install bootstrap code package, add bootstrap CSS inside the angular.json file as we have shown in below example, angular.json file is located at root of the angular project and open the file in your favorite code editor

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

Step 3 – Install the ng-bootstrap package

Lets again run below command in terminal to install ng-bootstrap package, this package will provide many widgets to use in angular project

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

Step 4 – Import the modules

For use a ng-bootstrap module, we need to register or add the module inside the app/app.module.ts, open the file and import the NgbModule module from @ng-bootstrap/ng-bootstrap package, plus import NgbModule module to imports array, see below code snippet

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
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 { }

Step 5 – Add code in the view file

in this step, We will add code to angular view file to open bootstrap modal popup, we will create a simple button to open a modal poo-up

so open the src/app/app.component.html and add below code

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</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">
    <form>
      <div class="form-group">
        <label for="dateOfBirth">First Name</label>
        <div class="input-group">
          <input id="first_name" class="form-control" placeholder="First Name" name="first_name" >          
        </div>
      </div>
      <div class="form-group">
        <label for="dateOfBirth">Last Name</label>
        <div class="input-group">
          <input id="last_name" class="form-control" placeholder="Last Name" name="last_name" >          
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Save</button>
  </div>
</ng-template>

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

<hr>

<pre>{{ closeResult }}</pre>

Step 6 – Add code in Typescript component .ts file

Now we need to update the component file add code for open, close and other events, so open the 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 = 'angular-app';
  closeResult = '';

  constructor(private modalService: NgbModal) {}

  open(content: any) {
    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}`;
    }
  }
}

Step 7 – Run an Angular 12 application

Execute the following command on terminal run angular app

  ng serve

Angular 12 modal popup example with Bootstrap 4

Step 1 – Create a new Angular 12 app

Step 2 – Install Bootstrap 4 package

Step 3 – Install the ng-bootstrap package

Step 4 – Import the modules

Step 5 – Add code in the view file

Step 6 – Add code in Typescript component .ts file

Step 7 – Run an Angular 12 application

Related Post

Leave a Comment Cancel Reply