How to control opening multiple dialogs

Question

I have created modal dialog in angular 2 using angular Material UI. App has two buttons, when we click any button the dialog should open. I am able to open modal dialog on button click but multiple dialog are opened when we continuously click on button. How we can do opening only one dialog and restricting the app to open another dialog if one is already present.

Below is the APP link

Angular 2 App

Solution 1

if(this.dialog.openDialogs.length==0){
   dialogRef = this.dialog.open(ModalComponent, {
    // disableClose: true  
  });

this can be useful to remove multiple opening dialogs

Solution 2

My solution was add dialogRef like a scope variable and check if is null to prevent open multiple dialogs. check here

https://stackblitz.com/edit/angular-js6t7b?file=app/app.component.ts

dialogRef: MdDialogRef<CommentDialogComponent>;

open(){
  if(this.dialogRef == null){
   //do the thing
 }
}

because when you click on one of buttons you created a new dialogRef.

Solution 3

You can add href to referance the open state from different component and disable the open on certain state, Here is the working link https://stackblitz.com/edit/angular-yttuya?file=app/app.component.ts