MatDialog 子关闭父 MatDialog

Question

I have a dialog that is used as popup window form. When user gets error the dialog pops up a smaller dialog with error message and OK button.

Clicking OK closes both matDialog windows.

How can I get it to just close its self and not its parent?

Parent =

<ng-template #dialogRef let-data>

Child =

this.dialog.open(ErrorDialogComponent, { data: message });

I have tried using different scopes, but OK seems to close all dialog windows.

Answer 1

You can close a dialog programmatically with:

constructor(private dialogRef: MatDialogRef<MyComponentToClose>){}


closeComponent(){
   this.dialogRef.close()
}

Answer 2

I had the same problem. This worked for me, though it's a slight workaround:

<button class="btn" mat-dialog-close="">Close</button>