Angular Material Confirm Dialog Box Easy Implementation

Sometimes we require Confirmation Popup box to be shown on the Web Form, In Angular if you are using Angular Material as UI tool, then follow the below steps to show the Confirmation Dialog Box in Angular 8 using Angular Material MatDialog

You can refer the following example to show the Confirm Dialog box in Angular using Angular Material: https://angular-material-confirm-dialog-using-matdialog.stackblitz.io/

Step 1: Create Angular Application using following command: ng new EmployeeManagementApp

Step 2: Change the Directory to enter into EmployeeManagementApp folder using following command: cd EmpoyeeManagementApp

Step 3: Open the code in Visual Studio Code using following Command: code .

Step 4: In Visual Studio Code, Open "Integrated Terminal" using Menu=>View=>Integrated Terminal option

Step 5: Enter the following command to install "Angular Material": ng add @angular/material

Step 6: Add the ConfirmDialogComponent using following command: ng g c confirm-dialog

Step 7: Add the following code in confirm-dialog.component.ts file

import { Component, OnInit, Inject} from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.css']
})
export class ConfirmDialogComponent implements OnInit {
  title: string;
  message: string;
  constructor(public dialogRef: MatDialogRef<ConfirmDialogComponent>,
              @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
  }
}

Step 8: Add the following code in confirm-dialog.component.html file:

<h1 mat-dialog-title>{{data.title}}</h1>
<div mat-dialog-content>
  {{data.message}}
</div>
<div style="float:right;margin:20px;">
  <input style="margin:0px 10px;" type="button" value="Confirm" [mat-dialog-close]="true">
  <input type="button" value="Cancel"  [mat-dialog-close]="false">

</div>

Step 9: In app.module.ts file, add the "BrowserAnimationsModule" & "MatDialogModule" in imports statement and add "ConfirmDialogComponent" in entryComponents statement as shown below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { MatDialogModule } from '@angular/material/dialog';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports:      [ BrowserModule, FormsModule, BrowserAnimationsModule, MatDialogModule ],
  entryComponents: [
    ConfirmDialogComponent
  ],
  declarations: [ AppComponent, ConfirmDialogComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

If you don't add MatDialogModule in the NgModue import, then it will throw the below error, so make sure that you add the above required imports and entryComponents into NgModule

Template parse errors: Can't bind to 'mat-dialog-close' since it isn't a known property of 'input'.

Step 10: Make sure you add the following css path in angular.json file in build & test sections both in "styles" section as shown below:

"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

 "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],

Step 11: Now, add the following code in app.component.ts to show the ConfirmDialog box:

import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  employeeList = [];
constructor(private dialog: MatDialog) {}
  ngOnInit() {
  this.employeeList = [{employeeId: 1, Name: 'John'}, {employeeId: 2, Name: 'Vikas'}, {employeeId: 3, Name: 'Jim'}];

  }
  removeEmployee(employeeObj) {
    const confirmDialog = this.dialog.open(ConfirmDialogComponent, {
      data: {
        title: 'Confirm Remove Employee',
        message: 'Are you sure, you want to remove an employee: ' + employeeObj.Name
      }
    });
    confirmDialog.afterClosed().subscribe(result => {
      if (result === true) {
        this.employeeList = this.employeeList.filter(item => item.employeeId !== employeeObj.employeeId);
      }
    });
  }
}

Step 12: Now, add the following code in app.component.html file as shown below:

<div style="margin:20px;">
<table border="1px" cellspacing="0" cellpadding="2">
  <tr>
    <td>Employee Id</td>
    <td>Name</td>
    <td>Action</td>
  </tr>
  <tr *ngFor="let employee of employeeList">
    <td>{{employee.employeeId}}</td>
    <td>{{employee.Name}}</td>
    <td><a style="cursor: pointer;text-decoration:underline;color:blue" (click)="removeEmployee(employee)">Remove</a></td>
  </tr>
  </table>
</div>

Step 13: Now, run the application using following command and see the output: ng serve -o

Above command will automatically open browser on port 4200, if it doesn't open, then you can hit the http://localhost:4200/ in browser and see the output. Following is the confirmation box output:

For Sample Example which will show you the Angular Material Confirmation Box using MatDialog is shared at: https://stackblitz.com/edit/angular-material-confirm-dialog-using-matdialog