Angular 14 Bootstrap Modal Popup Example

Angular 14 Bootstrap Modal Popup Example

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

Ng Bootstrap is developed from bootstrap and they provide all bootstrap 3, bootstrap 4 and bootstrap 5 native Angular 14 directives like a model, pagination, datepicker, buttons etc. Ng Bootstrap will help to easily use bootstrap ui.

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

Through this tutorial, we have learned how to create and use bootstrap modal popup in angular 14 apps.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published.