Post
Ask Question

Confirm Dialog In Angular Using Bootstrap Modal

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. 
 
Code 
 
Full code available on my github repository confirm-dialog. Please do contribute in my repository for enhancements and optimizations.
 
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.
 
Here, we have created the injectable service with observable method getMessage which will get the message to show in Confirm dialog. 
  1. import { Injectable } from '@angular/core';  
  2. import { Router, NavigationStart } from '@angular/router';  
  3. import { Observable } from 'rxjs';  
  4. import { Subject } from 'rxjs';  
  5.   
  6. @Injectable() export class ConfirmDialogService {  
  7.     private subject = new Subject<any>();  
  8.   
  9.     confirmThis(message: string, yesFn: () => void, noFn: () => void): any {  
  10.         this.setConfirmation(message, yesFn, noFn);  
  11.     }  
  12.   
  13.     setConfirmation(message: string, yesFn: () => void, noFn: () => void): any {  
  14.         const that = this;  
  15.         this.subject.next({  
  16.             type: 'confirm',  
  17.             text: message,  
  18.             yesFn(): any {  
  19.                     that.subject.next(); // This will close the modal  
  20.                     yesFn();  
  21.                 },  
  22.             noFn(): any {  
  23.                 that.subject.next();  
  24.                 noFn();  
  25.             }  
  26.         });  
  27.   
  28.     }  
  29.   
  30.     getMessage(): Observable<any> {  
  31.         return this.subject.asObservable();  
  32.     }  
  33. }  
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, OnInit } 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.   
  10. export class ConfirmDialogComponent implements OnInit {  
  11.     message: any;  
  12.     constructor(  
  13.         private confirmDialogService: ConfirmDialogService  
  14.     ) { }  
  15.   
  16.     ngOnInit(): any {  
  17.        /** 
  18.         *   This function waits for a message from alert service, it gets 
  19.         *   triggered when we call this from any other component 
  20.         */  
  21.         this.confirmDialogService.getMessage().subscribe(message => {  
  22.             this.message = message;  
  23.         });  
  24.     }  
  25. }  
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.
 
Here, we have created a template of our component. We can say that we have set the "look and feel" of our component. 
  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 class="mr-2" (click)="message.yesFn()">    
  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>    
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. import { BrowserModule } from '@angular/platform-browser';  
  3. import { CommonModule } from '@angular/common';  
  4.   
  5. import {ConfirmDialogComponent} from './confirm-dialog.component';  
  6. import {ConfirmDialogService} from './confirm-dialog.service';  
  7.   
  8. @NgModule({  
  9.     declarations: [  
  10.         ConfirmDialogComponent  
  11.     ],  
  12.     imports: [  
  13.         BrowserModule,  
  14.         CommonModule  
  15.     ],  
  16.     exports: [  
  17.         ConfirmDialogComponent  
  18.     ],  
  19.     providers: [  
  20.        ConfirmDialogService  
  21.     ]  
  22. })  
  23. export class ConfirmDialogModule  
  24. {  
  25. }  
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 { ConfirmDialogService } from './confirm-dialog/confirm-dialog.service';
  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
 
Note
Find the code on my github reposiotry confirm-dialog . Please do contribute in my repository for enhancements and optimizations.


Similar Articles