Close button of MatDiaLog in Angular get error Cannot read property 'close' of null

Question

I want to create a component with multiple content project in angular 6. It might be

This is the content I passed from the app.component.html :

<popup>
  <button buttonTrigger mat-button><span >Open the popup!</span></button>
  <my-dialog-content content></my-dialog-content>
</popup>

This is the content of the popup.component.html

<div (click)="openDialog()"><ng-content select="[buttonTrigger]" ></ng-content></div>
<ng-template #dialogContent>
  <ng-content select="[content]"></ng-content>
</ng-template>

And this is the content of the dialog content:

<mat-dialog-content>
my-dialog-content works!
</mat-dialog-content>

<mat-dialog-actions align="end">
    <ng-container ngProjectAs="btn-close"><button mat-button color="warn" matDialogClose>Close</button></ng-container>
    <button mat-button color="primary" type="submit" cdkFocusInitial>Submit</button>
</mat-dialog-actions>

This seems work except for the close button:

ERROR TypeError: Cannot read property 'close' of null

This is the link to my source code: https://stackblitz.com/edit/multiple-ngcontent

I don't know if there will be solution or good idea to fix this issue.

Thanks!

Answer 1

You can use dialog.closeAll() , below is the changes you have to do in your code

here's an example

in my-dialog-content.component.html

<mat-dialog-content>
    my-dialog-content works!
</mat-dialog-content>

<mat-dialog-actions align="end">
    <ng-container ngProjectAs="btn-close">
    <button mat-button color="warn" (click)="dialog.closeAll()">Close</button>
  </ng-container>
    <button mat-button color="primary" type="submit" cdkFocusInitial>Submit</button>
</mat-dialog-actions>

and in my-dialog-content.component.ts

import {MatDialog} from '@angular/material';

export class MyDialogContentComponent implements OnInit {

  constructor(public dialog: MatDialog) { }

} 

Updated Stackblitz