How to close parent dialog from child in angular?

Question

I have one parent dialog inside which there is one child dialog box resides. In child dialog box there is a close button .

On click of this close button, I want to close both parent and child dialog box. How can we do it in angular6 ?

Answer 1

You have to just pass the MatDialogRef of Parent dialog to the child dialog component in dialog data and close the same in child component code. Please find below code

1. This is code of Parent Component dialog which opens Child dialog and sends parent MatDialogRef to child dialog component in Data :

@Component({
  selector: 'confirmation-dialog',
  templateUrl: 'confirmation-dialog.html',
})
export class ConfirmationDialog {
  childDilogRef = null;
  message: string = "Are you sure?"
  confirmButtonText = "Yes"
  cancelButtonText = "Cancel"
  constructor(
    public dialog: MatDialog,
    @Inject(MAT_DIALOG_DATA) private data: any,
    private parentDilogRef: MatDialogRef<ConfirmationDialog>) {
      if(data){
    this.message = data.message || this.message;
    if (data.buttonText) {
      this.confirmButtonText = data.buttonText.ok || this.confirmButtonText;
      this.cancelButtonText = data.buttonText.cancel || this.cancelButtonText;
    }
      }

  }

  onConfirmClick(): void {
    this.parentDilogRef.close(true);
  }

// this method is used for opening child dialog   
OpenChild(){
     if (this.childDilogRef === null) {
        this.childDilogRef = this.dialog.open(MyChildComponent, {
          data: this.parentDilogRef, // parent dialog sent as data to child dialog component
        });
        this.childDilogRef.afterClosed().subscribe(result => {
          this.childDilogRef = null;
        });
      }
  }

}

2. This is code of child component which initializes provided ParentDialogRef to local dialogRef variable. and we close both the dialog ref on click of button on child dialog.

@Component({
  selector: "child-dialog",
  template: `<mat-dialog-content>
    <p>
        Click on button to close both dialogs
    </p>
</mat-dialog-content>
<mat-dialog-actions align="center">
<button (click)="closeBoth()">close both dialogs</button>
</mat-dialog-actions>`,
})
export class MyChildComponent {
  constructor(
    public childDialogRef: MatDialogRef<MyChildComponent>,
    public parentDialogRef : MatDialogRef<ConfirmationDialog>,
    @Inject(MAT_DIALOG_DATA) public data: MatDialogRef<ConfirmationDialog>
  ) { 
    if(data){
      this.parentDialogRef = data
    }
  }

  // close the about dialog
  onNoClick(): void {
    this.childDialogRef.close();
  }

  closeBoth():void{
    this.childDialogRef.close();
    this.parentDialogRef.close();
  }
}