Angular Material | Check if dialog is open

If it is in a single component, just store the ref. Useful for manipulating it.

private _openDialog() {
  if (!this.dialogRef) return;
  this.dialogRef = this.dialog.open(WarningComponent, {
    width: '450px',
    height: '380px',
  });

  this.dialogRef.afterClosed().pipe(
    finalize(() => this.dialogRef = undefined)
  );
}

if it's across components, check for the list of opened dialogs :

private _openDialog() {
  if (!this.dialog.openDialogs || !this.dialog.openDialogs.length) return;
  this.dialog.open(WarningComponent, {
    width: '450px',
    height: '380px',
  });
}

You can use this.dialog.getDialogById:

        const dialogExist = this.dialog.getDialogById('message-pop-up');

        if (!dialogExist) {
          this.dialog.open(MessagePopUpComponent, {
            id: 'message-pop-up',
            data: // some data
          });
        }

My solution was to declare a boolean

public isLoginDialogOpen: boolean = false; // I know by default it's false

public openLoginDialog() {

if (this.isLoginDialogOpen) {
  return;
}

this.isLoginDialogOpen = true;

this.loginDialogRef = this.dialog.open(LoginDialogComponent, {
  data: null,
  panelClass: 'theme-dialog',
  autoFocus: false
});

this.loginDialogRef.afterClosed().subscribe(result => {
  this.isLoginDialogOpen = false;
  console.log('The dialog was closed');
});
}

You can use the getState() method on the MatDialogRef:

const matDialogRef = this.matDialog.open(MyDialogComponent);
if(this.matDialogRef.getState() === MatDialogState.OPEN) {
    // The dialog is opened.
}