I am currently utilizing angular version 15.0 and I am interested in how to close a mat-dialog using two different methods. The first method involves clicking on one of the two buttons (submit / cancel) that are specified in the actions section of the dialog. The second method is by pressing the Escape key to cancel the operation. Essentially, both the cancel button and the Escape key perform the same action. The snippet used to open the dialog can be found below:
const myDialog = this.operationDialog.open(DialogComponent,
{
disableClose: true,
});
myDialog.afterClosed().subscribe((result) => {
if (result !== 'cancel')
// do somethings
else
// operation is canceled
);The mat-dialog snippet is as follows:
<mat-dialog-content class="mat-typography">
....
</mat-dialog-content>
<mat-dialog-actions>
<button (click)="submit()">submit</button>
<button (click)="cancel()">cancel</button>
</mat-dialog-actions>Furthermore, the typescript snippet for handling submission and cancellation functions is shown below:
submit(){
this.dialogRef.close(myData);
}
cancel(){
this.dialogRef.close('cancel');
}My question is whether it is feasible to close the dialog by hitting the Escape key to achieve the same outcome as clicking the cancel button? I appreciate your response.