Angular 14 Bootstrap Modal Popup Example

Angular 14 bootstrap modal popup; In this tutorial, you will learn how to create and use bootstrap 5 modal popup in angular 14 apps.

Angular 14 Bootstrap Modal Popup Example

Use the following steps to create and use bootstrap 5 modal popup in the angular 14 apps:

• Step 1 – Create New Angular App
• Step 2 – Install Bootstrap 5
• Step 3 – Install Ng Bootstrap
• Step 4 – Import Form Module
• Step 5 – Create Modal Popup in View File
• Step 6 – Update Component ts File
• Step 7 – Start Angular App

Step 1 – Create New Angular App

First of all, open your terminal and execute the following command on it to install angular app:

ng new my-new-app

Step 2 – Install Bootstrap 5

Open your terminal and navigate to your angular 14 apps directory on terminal. Then execute the following command on it to install bootstrap 5 into your angular 14 apps:

npm install bootstrap --save

Then open your angular.json file and include bootstrap css like “node_modules/bootstrap/dist/css/bootstrap.min.css”. As follows:

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

Step 3 – Install Ng Bootstrap

Again, Open your terminal and execute the following command on it to install ng bootstrap 5 into your angular 14 apps:

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

Step 4 – Import Module

Visit src/app/ directory and open app.module.ts file. Then import HttpClientModule, FormsModule and ReactiveFormsModule in this file, as follows:

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

Step 5 – Create Modal Popup in View File

Create modal popup using Bootstrap 5 modals. So, visit src/app directory and open app.component.html file. Then update the following code into it for create modal popup in angular apps; as follows:

<h1>Angular 14 Bootstrap Modal Popup Example - Tutsmake.com </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 Tutsmake.com
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
  </div>
</ng-template>

Note that:- In the abvoe form, have used bootstrap 5 classes. if you want to add than then; you can see the following article for that; as follow:

Step 6 – Update Component ts File

Visit the src/app directory and open app.component.ts. Then add the following code like formGroup and formControl element on component.ts file:

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 = '';

  /*------------------------------------------
  --------------------------------------------
  Created constructor
  --------------------------------------------
  --------------------------------------------*/
  constructor(private modalService: NgbModal) {}

  /**
   * Write code on Method
   *
   * @return response()
   */
  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)}`;
    });
  }

  /**
   * Write code on Method
   *
   * @return response()
   */
  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 – Start Angular App

In this step, execute the following command on terminal to start angular app:

ng serve

Open browser, enter the below url:

http://localhost:4200

Conclusion

Angular 14 bootstrap modal popup; In this tutorial, you have learned how to create and use bootstrap modal popup in angular 14 apps.