How to close multiple dialog individually in angular metarial angular 8 on click of close button

0
votes

I am using angular 8 metarial. I have 2 dialog,when I click a button a dialog will open, after that one more dialog will open when I click a button on the first dialog.Here I am using dialog over dialog.Here the main problem is I want to close the dialog individually on click of close button. Now when I want to close the second dialog on click of close button on it, first dialog is getting closed. Here is the code below

home.component.html

<div>
 <div class="alert alert-info">
 <strong>Angular Material Dialog Component</strong>
 </div>
</div>
<div>
 <h2>Simple Dialog With Action Button</h2>
 <button mat-raised-button (click)="dialog()">Click Me To Open Dialog</button>
</div>

home.component.ts

import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { Router } from '@angular/router'; 
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatDialogConfig } from '@angular/material';
import { DialogComponentComponent } from '../dialog-component/dialog-component.component';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  simpleDialog: MatDialogRef<DialogComponentComponent>;
  constructor(private router: Router,private dialogModel: MatDialog) { }

  ngOnInit() {}
     
dialog() {
 this.simpleDialog = this.dialogModel.open(DialogComponentComponent, {
  height: '400px',
  width: '600px',
});
 }

}

dialog-component.html

<h1 mat-dialog-title>Hello There</h1>
 <div mat-dialog-content>
 <p>This Is a Simple Dialog</p>
 <button (click)="openDialogWithTemplateRef()">Click to open other dialog</button>
 </div>
 <div mat-dialog-actions>
 <button mat-button (click)="close()">Close</button>
 </div>
 
<ng-template #secondDialog>
  <h2 matDialogTitle>Lovely dialog!</h2>
  <button mat-button (click)="close()">Close</button>
</ng-template>

dialog-component.ts

import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
@Component({
  selector: 'app-dialog-component',
  templateUrl: './dialog-component.component.html',
  styleUrls: ['./dialog-component.component.css']
})
export class DialogComponentComponent implements OnInit {

  constructor(private dialog: MatDialog, public dialogRef: MatDialogRef<DialogComponentComponent>) { }
@ViewChild('secondDialog', { static: true }) secondDialog: TemplateRef<DialogComponentComponent>;

  openDialogWithTemplateRef(templateRef: TemplateRef<DialogComponentComponent>) {
    this.dialog.open(this.secondDialog);
  } 
 
  ngOnInit() {
  }
close(): void {
 this.dialogRef.close();
 }
}

package.json

"@angular/material": "^8.2.3",

2
angular

2 Answers

0
votes
$event.stopPropagation()

Use stopPropagation to prevent the second dialog from being affected by the event of clicking on the first one. To do this you must pass $event in the close() function and make this call.

Best regards.

0
votes

you can do this in two ways.

1] home.component.ts

dialog() {
    this.dialogModel.open(DialogComponentComponent
        , { height: '400px', width: '600px', disableClose: true } );
}

2] dialog-component.ts

constructor([Dependency Injections and other local objects]){
    this.dialog.disableClose = true;
    this.dialog.open(this.secondDialog);
}