How to avoid parent dialog component that is closed by a child dialog template reference

Issue

I have a component that is a dialog (user creation form).

this.dialog.open(AddUserComponent, { restoreFocus: true });

This component opens another dialog via a template reference (to avoid creating tons of components for simple paragraphs...)

<mat-dialog-content>
    <!-- user creation form -->
</mat-dialog-content>
</mat-dialog-actions>
  <button (click)="submit()">
    create
  </button>
</mat-dialog-actions>
<!-- ------------- confirmation dialog ------------- -->
<ng-template #confirmDialog>
  <h2 matDialogTitle>confirmation dialog</h2>
  <mat-dialog-content>
    <p>are you sure ?/p>
  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close>
    close
    </button>
  </mat-dialog-actions>
</ng-template>

@ViewChild('confirmDialog') public confirmDialog!: TemplateRef<any>;

public submit() {
  this.dialog.open(this.confirmDialog);
} 

My problem is that when I click the "close" button on my confirmation dialog, the parent dialog closes. Keeping the child dialog open.

Expected:

I wish that when I press the "close" button it would close the dialog itself (child dialog) and not the others (parent dialog).

stackblitz

Thanks for helping

Solution

Add disableClose attribute as true to the parent component dialog.

this.dialog.open(this.confirmDialog, { disableClose: true });

Dialog gets close only on, call the close method programmatically.

this.dialogRef.close();

Answered By - Deepu Reghunath