How To Prevent MatDialog From Closing When Clicked Outside

In this blog, you will learn how to prevent MatDialog from closing when clicked outside.

By default, you could close a material dialog box by clicking outside dialog box element or by pressing the esape key. However, in certain situations you may want to prevent this from happening.

 

Angular Material comes with a built-in property called disableClose the prevents this behavior.

export class MyAppComponent {
  constructor(private dialog: MatDialog){}
  open() {
    this.dialog.open(ConfirmComponent, { disableClose: true });
  }
}

As you can see in the above code snippet, we're passing an object as the second parameter to open method which contains disableClose property set to true.

export class ConfirmComponent {
  constructor(private dialogRef: MatDialogRef<ConfirmComponent>){
    dialogRef.disableClose = true;
  }
}

You could also set the disableClose property to true in the dialog component.