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.
