In this article, we will see the bootstrap modal in angular 13. Ng Bootstrap is developed from bootstrap and they provide all bootstrap 3, bootstrap 4, and bootstrap 5 native angular 13 directives like a modal, pagination, date picker, buttons, etc. Ng Bootstrap will help to easily use bootstrap UI.
So, let's see bootstrap modal in angular 13, angular 13 bootstrap modal example, how to show modal popup in angular 13, how to use bootstrap modal in angular 12/13, modal popup in angular 13.
In this step, we will create a new app using the below command.
ng new my-new-app
Now, we will install the bootstrap core package using the below command.
npm install bootstrap --save
Now, we need to include bootstrap CSS like node_modules/bootstrap/dist/css/bootstrap.min.css. So, add it to the angular.json file.
angular.json
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.css"
],
In this step, we will install the ng-bootstap package for use of bootstrap UI.
npm install --save @ng-bootstrap/ng-bootstrap
Now, we will import NgbModule to the app.module.ts file.
src/app/app.module.ts
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 { }
In this step, we will update the HTML file.
src/app/app.component.html
<h1>Bootstrap Modal In Angular 13 - Websolutionstuff </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 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">
This is bootstrap modal example of websolutionstuff
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">Ok</button>
</div>
</ng-template>
Now, we need to update our component.ts file here we will write the code of the bootstrap model open and close the function.
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 = 'appBootstrap';
closeResult: string = '';
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}`;
}
}
}
In last, we need to run the server using the below command.
ng serve
Now, Go to your web browser, type the given URL and view the app output.
You might also like:
In this article, we will see how to merge two collections in laravel 8 or laravel 9. The Illuminate\Support\Co...
Jul-18-2022
In this tutorial, I will let you know how to use summernote editor in laravel, In laravel or PHP many editors are a...
Jun-17-2020
As an Angular 15 developer, I understand the significance of incorporating file upload functionality into web applicatio...
Jun-19-2023
In this article how to create components in angular 16. Here, we will learn about how to use angular component...
Jun-02-2023