How to communicate from angular-material2 dialog to its parent

Question

I have Parent component that opens an angular-material2 dialog box.

let dialogRef = this.dialog.open(Child, {
            disableClose: true
        });

opened dialog Child component has a button 'Add'. I want to notify the `Parent' component if user click on 'Add' button.

How is this possible?

Answer 1

I used EventEmitter to communicate back to parent container

    // dialog component
    ...
    onAdd = new EventEmitter();
    
    onButtonClick() {
      this.onAdd.emit();
    }
    ... 

and parent component

    // parent component
    ...
    let dialogRef = this.dialog.open(Component);
    const sub = dialogRef.componentInstance.onAdd.subscribe(() => {
      // do something
    });
    dialogRef.afterClosed().subscribe(() => {
      // unsubscribe onAdd
    });
    ...

Here is the demo

http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z

Thanks to thomaspink

Answer 2

Your Answer is correct but this thing is already mentioned in Angular2 Material Documentation in a simple way as you can subscribe to afterClosed method of dialog Reference (dialogRef as in the example) and you will get the selected option's value from subscribe method's argument (In our case result ).

let dialogRef = this.dialog.open(DialogResultExampleDialog);
dialogRef.afterClosed().subscribe(result => {
  this.selectedOption = result;
});

For more details, you can visit this link https://material.angular.io/components/component/dialog and go to Example Tab and try to understand simple example.

Answer 3

If the parent is a service you can communicate via the service.

However you'll run into circular reference issues if they both reference each other. You can instead use the data parameter when you open the dialog to pass the 'parent' to it (I like to do this via an interface).

So in the component when you inject MAT_DIALOG_DATA you can specify it as a certain interface.

  @Inject(MAT_DIALOG_DATA) public data: IMainMenuDialogData

Then define that for whatever you're passing in.

export interface IMainMenuDialogData
{
    mainMenuService: MainMenuService;
}

In the 'parent' component you pass it in via the data property

this.dialogRef.next(this.dialog.open(MainMenuDialogComponent, {
        width: '100vw',
        height: '100%',
        data: <IMainMenuDialogData> { mainMenuService: this }  ....

If you don't like passing in the whole service you can pass in specific observables, or properties or whatever else you need.