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

Answer 1

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

this can be useful to remove multiple opening dialogs

Answer 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.