Prevent MatDialog From Closing When Clicked Outside with pending changes-CodePudding

I want to prevent close on outside when there are pending changes. I something like this, but with no result.

this.dialogRef.beforeClosed().subscribe(() => {
  this.dialogRef.close(false);
  //some code logic
  //...
});

The disableClose on MatDialog have to stay false

CodePudding user response：

Initially, while opening dialog, you can pass 'disableClose' as true, and later manually close dialog on backdrop click or escape click if there are no pending changes.

this.dialog.open(DialogComponent, { disableClose: true });

dialogRef.backdropClick().subscribe( () => {
   if(!pendingChanges) dialogRef.close();
   // else do nothing
});

CodePudding user response：

Depending on the case, you can initially set disableClose as false, so that user can close it if there is no pending changes, depending on what that pending change is, if it is an async call for example, you can set the disableClose as true.

You can also then inject the MatDialogRef into the component itself and manually toggle disableClose per your requirements, so something like this:

constructor(private matDialogRef: MatDialogRef<WhateverYourDialogIsCalled>) {}

then in a async call it could be:

onSubmit() {
  this.matDialogRef.disableClose = true;
  this.myService.doSomething().subscribe(_ => {
    this.matDialogRef.disableClose = false;
  });
}