Angular Material: How close overlay's backdrop also on right click?

Question

How close the overlay's backdrop (opened by MatMenu or MatDialog) also on right click globally (without matMenu/matDialog reference)?

Answer 1

Right click has a default action which takes function by the browser itself.

I recommend not to override that functionality. Just add a listener for contextmenu event:

document.getElementByTagName('body')[0]
  .addEventListener('contextmenu', (ev) => {
    this.matMenu.closeMenu();
  }, false);

Answer 2

Another method

Open the matdialog :

this.dialogRef = this.dialog.open(template);

Listen contextmenu action :

<div (contextmenu)="closeDialog($event)"></div>

Close method :

closeDialog(event) {
  this.dialogRef.close();
}