How To Prevent MatDialog From Closing When Clicked Outside

Question

How to prevent MatDialog from closing when clicked outside but in all the dialogs in my Angular application ? I also realized that the escape key is not closing the dialog after setting disableClose to true so i added a hostlistener to force the close but it's not really the best solution... For a specific component I can do this.

export class MyAppComponent {  
  constructor(private dialog: MatDialog){}  
  open() {  
    this.dialog.open(ConfirmComponent, { disableClose: true });  
  }  
 
  @HostListener('window:keyup.esc') onKeyUp() {
    this.dialogRef.close();
  }

}

but how to do it globally for all the dialogs in my application instead of doing it in each dialog component and also apply the hostlistener?

Answer 1

You can define global setting in provider

import { MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';



@NgModule({
  providers: [
    { provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: { disableClose: true }}
  ]
})