Delete Confirmation Dialog Pop Up In Angular Using Bootstrap Modal

Introduction

In this article, we will learn about the Modal component, which is a cool feature of bootstrap.

It is a bootstrap modal that can be reused throughout our entire application. This modal asks before performing any delete operation. If we click on yes, then it will go ahead with the delete operation.

Prerequisites

Basic knowledge of Angular
Visual Studio Code must be installed
Angular CLI must be installed
Node JS must be installed

Step 1

Let's create a new Angular project using the following NPM command:

ng new modal-example

Step 2

Now, let's create a new component using the following command:

ng g c delete-confirmation-dailog

Step 3

Install ngx-bootstrap from npm using the following command:

npm i @ng-bootstrap/ng-bootstrap

Step 4

Now let's add bootstrap styles in our index.html file.

For Bootstrap 3

<linkhreflinkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">

For Bootstrap 4

<linkhreflinkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"rel="stylesheet">

Step 5

Let add the template in our delete-confirmation-dailog.component.html.

<div class="card">
<div class="card-body pb-0">
<h4 style="text-align: center;">Example of Delete Confirm Box</h4>
<div class="row">
<div class="col-12 col-md-12">
<div class="card">
<div class="card-body position-relative">
<div class="table-responsive cnstr-record product-tbl">
<table class="table table-bordered heading-hvr">
<thead>
<tr>
<th width="50">Art.No </th>
<th>Brand</th>
<th>Price/Unit</th>
<th>Provider</th>
<th>P. Art. N</th>
<th></th>
</tr>
</thead>
<tbody *ngFor="let product of products; let i = index">
<tr>
<td align="center">{{product.ArtNo}}</td>
<td>{{product.Brand}}</td>
<td>{{product.Price }}</td>
<td>{{product.Provider}}</td>
<td>{{product.ProviderArtNo}}</td>
<td> <div class="text-left">
<a title="Edit" class="mr-2" href="javascript:void(0);">Edit</a>
<a title="Delete" (click)="open(content,product.id)" href="javascript:void(0);"
>Delete</a>
</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ng-template #content let-c="close" let-d="dismiss">
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Confirmation</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Are you sure to delete this?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="d('Cross click')">Cancel</button>
<button type="button" class="btn btn-outline-dark" (click)="c('yes')">Yes</button>
</div>
</ng-template>

Step 6

Now, open the delete-confirmation-dailog.component.ts file and add the following code in this file:

import { Component, EventEmitter, OnInit, Output } from '@angular/core';
import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';
@Component({
selector: 'app-delete-confirmation-dailog',
templateUrl: './delete-confirmation-dailog.component.html',
styleUrls: ['./delete-confirmation-dailog.component.css']
})
export class DeleteConfirmationDailogComponent implements OnInit {
closeResult: string;
products = [];
constructor(private modalService: NgbModal) {
}
ngOnInit() {
this.getProducts();
}
public getProducts() {
this.products = [{
'id': '05fb32e7-9fae-4879-879-d037fdc24',
'ArtNo': '123',
'Brand': 'Apple',
'Price': '90000',
'Provider': 'FCFS',
'ProviderArtNo': 1
}, {
'id': '05fb32e7-9fae-4879-379-d07937fdc24',
'ArtNo': '123',
'Brand': 'OnePlus',
'Price': '50000',
'Provider': 'FCFS',
'ProviderArtNo': 2
}, {
'id': '05fb32e7-9fae-4879-379-d03737fdc24',
'ArtNo': '123',
'Brand': 'RealMe',
'Price': '20000',
'Provider': 'FCFS',
'ProviderArtNo': 3
}, {
'id': '05fb32e7-9fae-4879-8379-d0377fdc24',
'ArtNo': '123',
'Brand': 'Samsung',
'Price': '60000',
'Provider': 'FCFS',
'ProviderArtNo': 4
}];
}
open(content, videoId) {
this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
if (result === 'yes') {
this.deleteHero(videoId);
}
}, (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}`;
}
}
deleteHero(id) {
this.products = this.products.filter(x => x.id !== id);
}
}

Step 7

Now, open the app.component.html file and add the following code:

<app-delete-confirmation-dailog></app-delete-confirmation-dailog>

Step 8

Let's open the app.module.ts file and add the following code: Import ngb Module in root module component

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import { DeleteConfirmationDailogComponent } from './delete-confirmation-dailog/delete-confirmation-dailog.component';
@NgModule({
// tslint:disable-next-line: deprecation
imports: [BrowserModule, FormsModule, NgbModule.forRoot()],
declarations: [AppComponent, DeleteConfirmationDailogComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

Now its time for the Output:

Conclusion

Finally we have completed how to create a confirmation dialog box in Angular using bootstrap.

I hope you liked this tutorial. Please share it with others.

Thank you for taking your valuable time to read the full article.