1

I have a mat menu inside mat dialog. After opening dialog and then menu inside it, i pressed esc to close the menu, but both menu and dialog are closed. How to close just the menu and not the dialog with ESC?

It can be reproduced here. https://stackblitz.com/edit/angular-wzau6u

Chanakya Chowdary Prathi
  • 17
  • 5

1 Answers1

0

You can add disableClose: true to the dialogRef configuration, to prevent the dialog closing from pressing esc. It's explained in the API of the Dialog component.

disableClose: boolean
Whether the user can use escape or clicking on the backdrop to close the modal.

openDialog(): void {
  const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
    width: '250px',
    data: {name: this.name, animal: this.animal},
    disableClose: true
  });

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

See this updated StackBlitz for reference.

Roy
  • 7,811
  • 4
  • 24
  • 47
  • i don't want to disable ESC altogether, i just want to press ESC two times to close both Menu and Dialog, One for menu first then another ESC should close the modal. – Chanakya Chowdary Prathi Sep 25 '20 at 11:24