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
});
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.