Calling parent component function from angular 4 material dialog

Question

I have a working function (say functionA) in my parent component. However, I want to make it nicer by adding Angular Material dialog which basically contains 'Yes' and 'No' button. Clicking 'No' will close the dialog which is working fine. Now if I click 'Yes', I want it to call 'functionA'. How to do so with Angular 4?

Unknown Unknown · Accepted Answer · 2017-12-12T12:47:50

It's all in the documentation, that you probably haven't read :

let dialogRef = this.dialog.open(MyDialogComponent);

dialogRef.afterClosed().subscribe(result => {
  this.functionA();
});

In your modal, the button should be

<button mat-button [mat-dialog-close]="true">Yes</button>

This will return true in the subscribe.

Calling parent component function from angular 4 material dialog

1 Answers