Prevent closing of Angular Material Dialog when escape button is pressed but allow closing when backdrop is clicked

Question

By default, when the esc button is pressed, the dialog closes. However, I don't want this intended behaviour.

What I would like to happen is to prevent closing when the esc button is pressed but still allow a click on the backdrop to close the dialog. How can this be done?

I've tried something like this. However, it doesn't work:

openEditDialog() {
  const dialogRef = this.dialog.open(EditPlaceDialogComponent, {
    width: '90%',
    height: '720px'
  });

  dialogRef.keydownEvents().subscribe(e => {
    if (e.keyCode === 27) {
      e.preventDefault();
      dialogRef.disableClose = false;
    }
  });

  dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}

Does this answer your question? [Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)](https://stackoverflow.com/questions/46772852/disable-click-outside-of-angular-material-dialog-area-to-close-the-dialog-with) — reverie_ss, Apr 10 '20 at 15:09

Edric · Accepted Answer · 2018-06-25T16:25:31.860

You can use the disableClose option of MatDialogConfig. Pass it in as the second parameter of MatDialog#open:

openDialog() {
  this.dialog.open(MyDialogComponent, { disableClose: true });
  // ...
}

This should prevent esc from closing the dialog.

EDIT: I managed to solve what you asked for by adapting Marc's answer (as a comment on my answer), as well as using MatDialogRef#backdropClick to listen for click events to the backdrop.

Initially, the dialogue will have disableClose set as true. This ensures that the esc keypress, as well as clicking on the backdrop will not cause the dialogue to close.

Afterwards, subscribing to the MatDialogRef#backdropClick method (which emits when the backdrop gets clicked and returns as a MouseEvent).

Anyways, enough technical talk. Here's the code:

openDialog() {
  let dialogRef = this.dialog.open(EditPlaceDialogComponent, { disableClose: true /* Your other config options here */ });
  /*
     Subscribe to events emitted when the backdrop is clicked
     NOTE: Since we won't actually be using the `MouseEvent` event, we'll just use an underscore here
     See https://stackoverflow.com/a/41086381 for more info
  */
  dialogRef.backdropClick().subscribe(_ => {
    // Close the dialog
    dialogRef.close();
  })

  // ...
}

Stackblitz demo (click on "Open fourth dialog" to test it out!)

thank you for giving me an answer. The case that esc is disable but click outside is enable. What should I do in this case? — 通りすがりのおっさん, Jun 25 '18 at 06:48
@通りすがりのおっさん I've managed to work it out. Check the Stackblitz demo! — Edric, Jun 25 '18 at 16:19

score 0 · Answer 2 · answered Aug 16 '23 at 06:54

Below Solution works for me:

https://material.angular.io/components/dialog/api#MatDialogConfig

    const dialogProperty= {
      disableClose: true,
      width: '600px',
      backdropClass: 'transparent',
      data: {data: userDetails}
    }
    this.submitModelRef = this._matDialog.open(SaveDetailsDialogComponent, dialogProperty);

Prevent closing of Angular Material Dialog when escape button is pressed but allow closing when backdrop is clicked

2 Answers2

Linked