Confirm Dialog In Angular Using Bootstrap Modal

This article shows how to create a custom component for Confirm Dialog in Angular using modal popup of bootstrap.

Introduction

 
Confirm Dialog is one of the important phenomena in Angular. Let us see how to create a custom component for a Confirm dialog using Bootstrap modal popup.
 
Prerequisites 
 
Basic knowledge of Angular components, Services module, and TypeScript.
 
I will create a custom component for confirm dialog using bootstrap modal and also, I'll show you how to use that component in your app. I have assumed that you have the basic knowledge of Angular and you have already created an Angular app. Here, I'll show how to create a component in your existing app.
 
Step 1
 
Create a folder named confirm-dialog in your app's components folder. We will create all the components and services in this folder only.
 
Step 2. confirm-dialog.service.ts 
 
Create a TypeScript file with the name 'confirm-dialog.service.ts' in confirm-dialog folder and into it, paste the code shown below.This file will create the injectable service to show and hide the component.
  1. import { Injectable } from '@angular/core';  
  2. import { Router, NavigationStart } from '@angular/router';  
  3. import { Observable } from 'rxjs';  
  4. import { Subject } from 'rxjs/Subject';  
  5. @Injectable() export class ConfirmDialogService {  
  6.     private subject = new Subject<any>();  
  7.     constructor() { }  
  8.     confirmThis(message: string, siFn: () => void, noFn: () => void) {  
  9.         this.setConfirmation(message, siFn, noFn);  
  10.     }  
  11.     setConfirmation(message: string, siFn: () => void, noFn: () => void) {  
  12.         let that = this;  
  13.         this.subject.next({  
  14.             type: "confirm",  
  15.             text: message,  
  16.             siFn:  
  17.                 function () {  
  18.                     that.subject.next(); //this will close the modal  
  19.                     siFn();  
  20.                 },  
  21.             noFn: function () {  
  22.                 that.subject.next();  
  23.                 noFn();  
  24.             }  
  25.         });  
  26.   
  27.     }  
  28.   
  29.     getMessage(): Observable<any> {  
  30.         return this.subject.asObservable();  
  31.     }  
  32. }  
Here, we have created the injectable service with observable method getMessage which will get the message to show in Confirm dialog.
 
Step 3. confirm-dialog.component.ts
 
Create another TypeScript file with the name 'confirm-dialog.component.ts' manully or you can also create a component using Angular CLI and paste the below coode in that file.
  1. import { Component, Input } from '@angular/core';  
  2. import { ConfirmDialogService } from "./confirm-dialog.service";  
  3.   
  4. @Component({  
  5.     selector: 'app-confirm-dialog',  
  6.     templateUrl: 'confirm-dialog.component.html',  
  7.     styleUrls: ['confirm-dialog.component.css']  
  8. })  
  9. export class ConfirmDialogComponent {  
  10.     message: any;  
  11.     constructor(  
  12.         private confirmDialogService: ConfirmDialogService  
  13.     ) { }  
  14.   
  15.     ngOnInit() {  
  16.         //this function waits for a message from alert service, it gets   
  17.         //triggered when we call this from any other component  
  18.         this.confirmDialogService.getMessage().subscribe(message => {  
  19.             this.message = message;  
  20.         });  
  21.     }  
  22. }  
Here, we have created the Confirm Dialog component and injected the Confirm Dialog service created in the second step. 
 
Step 4. confirm-dialog.component.html
 
Create an HTML file with the name 'confirm-dialog.component.html' and paste the below code.
  1. <div *ngIf="message" class="modal" tabindex="-1" role="dialog" style="display:block!important">  
  2.     <div class="modal-dialog custom-alert" role="document">  
  3.         <div class="modal-content">  
  4.   
  5.             <div *ngIf="message?.type == 'confirm'" class="modal-body">  
  6.                 <div class="row">  
  7.                     <div class="col-md-12">  
  8.                         <p class="text-center confirm-message">{{message.text}}</p>  
  9.                     </div>  
  10.                 </div>  
  11.                 <div class="row">  
  12.                     <div class="col-md-12">  
  13.                         <p class="confirm-button">  
  14.                             <a (click)="message.siFn()">  
  15.                                 <button class="btn btn-yes">Yes</button>  
  16.                             </a>  
  17.                             <a (click)="message.noFn()">  
  18.                                 <button class="btn btn-no">No</button>  
  19.                             </a>  
  20.                         </p>  
  21.                     </div>  
  22.                 </div>  
  23.             </div>  
  24.         </div>  
  25.     </div>  
  26. </div>  
Here, we have created a template of our component. We can say that we have set the "look and feel" of our component. 
 
Step 5. confirm-dialog.component.css
 
Now, we will write some CSS  to decorate our component. Create a file named 'confirm-dialog.component.css' and paste the below code into it. 
  1. .custom-alert {  
  2.     width:300px;  
  3. }  
  4.   
  5. .modal-backdrop.in {  
  6.     opacity: 0.9;  
  7. }  
  8.   
  9. .modal-body {  
  10.     background-color: whitesmoke;  
  11.     border-radius: 11px;  
  12. }  
  13.   
  14. .modal {  
  15.     background-color: rgba(58, 51, 51, 0.4);  
  16.     padding-top:5px;  
  17. }  
  18.   
  19. .confirm-message {  
  20.     font-family:'Times New Roman', Times, serif;  
  21.     font-size:20px;  
  22.     font-weight:bold;  
  23.     margin-bottom:0px;  
  24.     margin-top:5px;  
  25. }  
  26.   
  27. .confirm-button {  
  28.     text-align: center;  
  29.     margin: 15px 0px 15px 0px;  
  30. }  
  31.   
  32. .btn-no {  
  33.     background-color: #f4516c;  
  34.     color:white;  
  35. }  
  36.   
  37. .btn-yes {  
  38.     background-color: #716aca;  
  39.     color:white;  
  40. }   
Step 6. confirm-dialog.module.ts
 
Our Confirm dialog component is almost ready. Now, we will create a module and will declare this component in that module. So, we can declare this module in any other module where we want to use the dialog or in 'app.module.ts'.
  1. import { NgModule } from '@angular/core';  
  2.   
  3. import {ConfirmDialogComponent} from './confirm-dialog.component.ts';  
  4. import {ConfirmDialogService} from './confirm-dialog.service.ts';  
  5.   
  6. @NgModule({  
  7.     declarations: [  
  8.         ConfirmDialogComponent  
  9.     ],  
  10.     exports: [  
  11.         ConfirmDialogComponent  
  12.     ],providers:[  
  13.        ConfirmDialogService  
  14.     ]  
  15. })  
  16. export class ConfirmDialogModule  
  17. {  
  18. }  
Step 7 
 
Our Component is ready now. Let's import the module file created in the above step into our app.module.ts file. 
 
Now, we can use the Confirm dialog in any of the other components. To use this component in another component, we need to follow the following steps. 
 
Step 8
 
Let's assume we are using this component in App component. To use the above-created component, we have to inject the service created above in the constructor of this component. See the code below for example.
  1. import { Component } from '@angular/core';  
  2. import {  ConfirmDialogModule } from "../confirm-dialog/confirm-dialog.module.ts";  
  3.   
  4. @Component({  
  5.     selector: 'app-dashboard',  
  6.     templateUrl: './dashboard.component.html'  
  7. })  
  8. export class DashboardComponent {  
  9.   
  10.   
  11.   constructor(  
  12.     private confirmDialogService: ConfirmDialogService,  
  13.   ) {  
  14.       
  15.   }  
  16.   
  17.   showDialog() {  
  18.     this.confirmDialogService.confirmThis("Are you sure to delete?", function () {  
  19.       alert("Yes clicked");  
  20.     }, function () {  
  21.       alert("No clicked");  
  22.     })  
  23.   }  
  24.      
  25. }  
Step 9
 
Write a tag of confirm-dialog in your HTML file of the component where you want to use the Confirm dialog.
  1. <app-confirm-dialog></app-confirm-dialog>  
Let's create a button and bind the showDilaog method created in Step 8 to the click event of this button. 
  1. <button class="btn btn-primary pull-right" (click)="showDialog()">Show Dialog</button>  
Now, run the app and click the button "Show Dialog". You will see the Confirm dialog as shown in the image below. 
 
Confirm Dialog In Angular Using Bootstrap Modal