I am just writing a small code that will help fellow developers to pass an object after the dialog is closed.
<!--Dialog Compoenent / popup -->
<div [innerHTML]="data"></div>
<button (click)="cancel()">No</button>
<button (click)="confirm()">Yes</button>
// Typescript
export class DialogComponent {
// receive data from parent using 'MAT_DIALOG_DATA'
constructor(@Inject(MAT_DIALOG_DATA) public data: string,
private dialogRef: MatDialogRef<DialogComponent>) { }
cancel() {
// closing itself and sending data to parent component
this.dialogRef.close({ data: 'you cancelled' })
}
confirm() {
// closing itself and sending data to parent component
this.dialogRef.close({ data: 'you confirmed' })
}
}
//parent component
constructor(private dialog: MatDialog) { }
// method to open dialog
openDialog() {
let dialogRef = this.dialog.open(DialogComponent, {
data: `Are you sure you want to delete?`
})
dialogRef.afterClosed().subscribe(res => {
// received data from confirm-component
console.log(res.data)
})
}