I'm using the Angular Material dialog to show a warning message in my app.
I need to check if a dialog is already open like this:
private _openDialog() {
// if (this.dialog.isOpen()) return; <-- NOT WORKING
this.dialog.open(WarningComponent, {
width: '450px',
height: '380px',
});
}
Question: Is there any way to check if a Angular Material Dialog box is already 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 the getState() method on the MatDialogRef:
const matDialogRef = this.matDialog.open(MyDialogComponent);
if(this.matDialogRef.getState() === MatDialogState.OPEN) {
// The dialog is opened.
}
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');
});
}
