How to close parent dialog depending on selected answer in confirm child dialog in Angular?

Issue

I’m trying to close a parent mat-dialog depending on the answer to a child confirm mat-dialog in Angular. The child confirm dialog says "You have unsaved changes. Are you sure you want to close?" If the user clicks YES then both dialogs are supposed to close. If they say NO, then only the confirm dialog is supposed to close. The NO works but not the the YES.

Here is the template with the two buttons

<mat-dialog-actions align="end">
  <button
    mat-button color="accent" (click)="save()" [mat-dialog-close]="true" cdkFocusInitial
  >Save
  </button>
  <button mat-button (click)="openConfirmDialog()">cancel</button>
</mat-dialog-actions>

The following snippets are in the parent dialog:

  constructor(
    public dialog: MatDialog,
    public parentDialogRef: MatDialogRef<ParentDialogComponent>,

The confirm dialog pops up when the user clicks the SAVE button in the parent dialog. The child confirm dialog has a reference to the parent dialog when it opens so that it can close it.

  openConfirmDialog() {
    const dialogRef = this.dialog.open(ConfirmDialogComponent, {
      message: "You have unsaved changes. Are you sure you want to close?"
    });
    dialogRef.afterClosed().subscribe(result => {
      if (result=='true') {
        console.log('result=',result,parentDialogRef=',this.parentDialogRef);
        this.parentDialogRef.close();
      }
    })
  }

The console.log shows a result of ‘true’ and a valid parentDialogRef, yet the parent dialog fails to close when the user selects YES.

Here is the confirm dialog .ts code:

import {Component, Inject} from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'app-confirm-dialog',
  templateUrl: './confirm-dialog.component.html',
  styleUrls: ['./confirm-dialog.component.css']
})
export class ConfirmDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ConfirmDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public message: string) {
    dialogRef.disableClose = true;
  }
}

I want this code to be generic so that it can be used by any other component.

Suggestions?

Solution

The solution was to look for boolean true instead of string ‘true’. It works now. Hopefully someone else will benefit from this post.

Answered By – user3217883

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.