Create a new component for example we create it under shared folder name it dialog
ng g c shared/dialog
in app.module
declarations: [
AppComponent,
DialogComponent,
],
imports:[],
providers:[],
entryComponents: [DialogComponent]
in the dialog component.html past the following code
<h1 mat-dialog-title>
{{title}}
</h1>
<div mat-dialog-content>
<p>{{message}}</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)=”onDismiss()”>No</button>
<button mat-raised-button color=”primary” (click)=”onConfirm()”>Yes</button>
</div>
in dialog component.ts past the following code
import { MatDialogRef, MAT_DIALOG_DATA } from ‘@angular/material’;
import { Component, OnInit, Inject } from ‘@angular/core’;
@Component({
selector: ‘app-dialog’,
templateUrl: ‘./dialog.component.html’,
styleUrls: [‘./dialog.component.css’]
})
export class DialogComponent implements OnInit {
title: string;
message: string;
constructor(public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogModel) {
// Update view with given values
this.title = data.title;
this.message = data.message;
}
ngOnInit() {
}
onConfirm(): void {
// Close the dialog, return true
this.dialogRef.close(true);
}
onDismiss(): void {
// Close the dialog, return false
this.dialogRef.close(false);
}
}
export class DialogModel {
constructor(public title: string, public message: string) {
}
}
in the component you want to use it import the following
//———dialog——————/
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from ‘@angular/material/dialog’;
import { DialogModel, DialogComponent } from ‘../../../shared/dialog/dialog.component’;
add the dialog function in your component
//————–dialog——-//
confirmDialog(): void {
const message = `Are you sure you want to delete?`;
const resDialog = new DialogModel(“Confirm Action”, message);
const dialogRef = this.dialog.open(DialogComponent, {
maxWidth: “600px”,
data: resDialog
});
dialogRef.afterClosed().subscribe(dialogResult => {
this.result = dialogResult;
});
}
call from your component html:
<button mat-raised-button color=”primary” (click)=”confirmDialog()”>Confirm</button>
Life Coders 