Post
Ask Question

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:

  1. ng new modal-example  
Step 2
 
Now, let's create a new component using the following command:
  1. ng g c delete-confirmation-dailog   
Step 3
 
Install ngx-bootstrap from npm using the following command:
  1. npm i @ng-bootstrap/ng-bootstrap   
Step 4
 
Now let's add bootstrap styles in our index.html file.
 
For Bootstrap 3
  1. <linkhreflinkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet">  
For Bootstrap 4
  1. <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.
  1. <div class="card">    
  2.   <div class="card-body pb-0">    
  3.     <h4 style="text-align: center;">Example of Delete Confirm Box</h4>    
  4.     <div class="row">    
  5.       <div class="col-12 col-md-12">    
  6.         <div class="card">    
  7.     
  8.           <div class="card-body position-relative">    
  9.             <div class="table-responsive cnstr-record product-tbl">    
  10.               <table class="table table-bordered heading-hvr">    
  11.                 <thead>    
  12.                   <tr>    
  13.                     <th width="50">Art.No </th>    
  14.                     <th>Brand</th>    
  15.                     <th>Price/Unit</th>    
  16.                     <th>Provider</th>    
  17.                     <th>P. Art. N</th>    
  18.                     <th></th>    
  19.                   </tr>    
  20.                 </thead>    
  21.     
  22.                 <tbody *ngFor="let product of products; let i = index">    
  23.                   <tr>    
  24.                     <td align="center">{{product.ArtNo}}</td>    
  25.                     <td>{{product.Brand}}</td>    
  26.                     <td>{{product.Price }}</td>    
  27.                     <td>{{product.Provider}}</td>    
  28.                     <td>{{product.ProviderArtNo}}</td>    
  29.                     <td>  <div class="text-left">    
  30.                       <a title="Edit" class="mr-2" href="javascript:void(0);">Edit</a>    
  31.                       <a title="Delete" (click)="open(content,product.id)" href="javascript:void(0);"    
  32.                           >Delete</a>    
  33.                   </div></td>    
  34.                   </tr>    
  35.                 </tbody>    
  36.               </table>    
  37.             </div>    
  38.           </div>    
  39.         </div>    
  40.       </div>    
  41.     </div>    
  42.   </div>    
  43. </div>    
  44.   <ng-template #content let-c="close" let-d="dismiss">    
  45.         <div class="modal-header">    
  46.             <h4 class="modal-title" id="modal-basic-title">Confirmation</h4>    
  47.             <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">    
  48.                 <span aria-hidden="true">×</span>    
  49.             </button>    
  50.         </div>    
  51.         <div class="modal-body">    
  52.             <p>Are you sure to delete this?</p>    
  53.         </div>    
  54.         <div class="modal-footer">    
  55.             <button type="button" class="btn btn-outline-dark" (click)="d('Cross click')">Cancel</button>    
  56.             <button type="button" class="btn btn-outline-dark" (click)="c('yes')">Yes</button>    
  57.         </div>    
  58.     </ng-template>     
Step 6
 
Now, open the delete-confirmation-dailog.component.ts file and add the following code in this file:
  1. import { Component, EventEmitter, OnInit, Output } from '@angular/core';  
  2. import { ModalDismissReasons, NgbModal } from '@ng-bootstrap/ng-bootstrap';  
  3.   
  4. @Component({  
  5.   selector: 'app-delete-confirmation-dailog',  
  6.   templateUrl: './delete-confirmation-dailog.component.html',  
  7.   styleUrls: ['./delete-confirmation-dailog.component.css']  
  8. })  
  9. export class DeleteConfirmationDailogComponent implements OnInit {  

  11.   closeResult: string;  
  12.   products = [];  
  13.   constructor(private modalService: NgbModal) {  
  14.   }  
  15.   
  16.   ngOnInit() {  
  17.     this.getProducts();  
  18.   }  
  19.   
  20.   public getProducts() {  
  21.     this.products = [{  
  22.       'id': '05fb32e7-9fae-4879-879-d037fdc24',  
  23.       'ArtNo': '123',  
  24.       'Brand': 'Apple',  
  25.       'Price': '90000',  
  26.       'Provider': 'FCFS',  
  27.       'ProviderArtNo': 1  
  28.     }, {  
  29.       'id': '05fb32e7-9fae-4879-379-d07937fdc24',  
  30.       'ArtNo': '123',  
  31.       'Brand': 'OnePlus',  
  32.       'Price': '50000',  
  33.       'Provider': 'FCFS',  
  34.       'ProviderArtNo': 2  
  35.     }, {  
  36.       'id': '05fb32e7-9fae-4879-379-d03737fdc24',  
  37.       'ArtNo': '123',  
  38.       'Brand': 'RealMe',  
  39.       'Price': '20000',  
  40.       'Provider': 'FCFS',  
  41.       'ProviderArtNo': 3  
  42.     }, {  
  43.       'id': '05fb32e7-9fae-4879-8379-d0377fdc24',  
  44.       'ArtNo': '123',  
  45.       'Brand': 'Samsung',  
  46.       'Price': '60000',  
  47.       'Provider': 'FCFS',  
  48.       'ProviderArtNo': 4  
  49.     }];  
  50.   }  
  51.   
  52.   open(content, videoId) {  
  53.     this.modalService.open(content, { ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {  
  54.       this.closeResult = `Closed with: ${result}`;  
  55.       if (result === 'yes') {  
  56.         this.deleteHero(videoId);  
  57.       }  
  58.     }, (reason) => {  
  59.       this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;  
  60.     });  
  61.   }  
  62.   
  63.   private getDismissReason(reason: any): string {  
  64.     if (reason === ModalDismissReasons.ESC) {  
  65.       return 'by pressing ESC';  
  66.     } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {  
  67.       return 'by clicking on a backdrop';  
  68.     } else {  
  69.       return `with: ${reason}`;  
  70.     }  
  71.   }  
  72.   
  73.   deleteHero(id) {  
  74.     this.products = this.products.filter(x => x.id !== id);  
  75.   }  
  76.   
  77. }  
Step 7
 
Now, open the app.component.html file and add the following code:
  1. <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
  1. import { NgModule } from '@angular/core';  
  2. import { BrowserModule } from '@angular/platform-browser';  
  3. import { FormsModule } from '@angular/forms';  
  4. import { NgbModule } from '@ng-bootstrap/ng-bootstrap';  
  5. import { AppComponent } from './app.component';  
  6. import { DeleteConfirmationDailogComponent } from './delete-confirmation-dailog/delete-confirmation-dailog.component';  
  7.   
  8. @NgModule({  
  9.   // tslint:disable-next-line: deprecation  
  10.   imports: [BrowserModule, FormsModule, NgbModule.forRoot()],  
  11.   declarations: [AppComponent, DeleteConfirmationDailogComponent],  
  12.   bootstrap: [AppComponent]  
  13. })  
  14. 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.


Similar Articles