How can we close a nested MatDialog in Angular?

edit

To close a nested MatDialog in Angular, you can use the MatDialogRef instance of the nested dialog and call the close() method on it.

Here is an example:

1. In the parent component, open the nested dialog using the MatDialog service:

import { MatDialog } from '@angular/material/dialog';
import { NestedDialogComponent } from './nested-dialog/nested-dialog.component';

@Component({
  ...
})
export class ParentComponent {
  constructor(private dialog: MatDialog) {}

  openNestedDialog() {
    const dialogRef = this.dialog.open(NestedDialogComponent);
  }
}

1. In the nested dialog component, inject the MatDialogRef instance and use it to close the dialog:

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

@Component({
  ...
})
export class NestedDialogComponent implements OnInit {
  constructor(private dialogRef: MatDialogRef<NestedDialogComponent>) {}

  ngOnInit() {}

  closeNestedDialog() {
    this.dialogRef.close();
  }
}

1. In the nested dialog template, call the closeNestedDialog() method on a button click or any other event:

<button mat-button (click)="closeNestedDialog()">Close nested dialog</button>

This will close the nested dialog and return control to the parent component.