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?
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
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.
With "@angular/material": "~7.0.0" componentInstance no longer exist on MatBottomSheetRef.
It has been replace by instance
Parent implementation:
let dialogRef = this.dialog.open(Component);
const sub = dialogRef.instance.onAdd.subscribe(() => {
// do something
});