Components: How to communicate from dialog back to parent container

[ermarkar]

feature request:

How to communicate from dialog back to parent container?

[Kyderman]

let dialogRef = this.dialog.open(Component);
// properties
dialogRef.componentInstance.address = address;
dialogRef.componentInstance.canEdit = this.canEdit;
dialogRef.componentInstance.isEdit = true;
// subscription on close
dialogRef.afterClosed()
.subscribe(() => {})

Something like this.

You can set properties in the component instance like I have above, then you can grab them again after close.

[ermarkar]

this is on the particular event that is if I close the dialog box.

I have posted a question about this. Can you solve this @Kyderman
https://stackoverflow.com/questions/42717508/how-to-communicate-from-angular-material2-dialog-to-its-parent

[thomaspink]

You could create an EventEmitter in your dialog component and subscribe to it in the parent.
Then call emit once the button has been clicked.

// dialog component
...
onAdd = new EventEmitter();

onButtonClick() {
  this.onAdd.emit();
}
...

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

I think this issue can be closed

[ermarkar]

this is parent component that opens the dialog

 open(data: any) {
        let dialogRef = this.dialog.open(ChildComponent, {
            disableClose: true
       });
        dialogRef.componentInstance.data = data;

        const sub = dialogRef.componentInstance.onAdd.subscribe((data: any) => {
            debugger
            console.log(data)
        });
    }

and in dialog

@Output() onAdd = new EventEmitter<any>(true);

add(data: any) { this.onAdd.emit(data); }

but nothing happens :(

Am i missing something?

[thomaspink]

http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z

[vaishalichawla26]

In dialog component (child), say on submit event

onSubmit() {
this.dialogRef.close('submit');
}

In parent

openDialog() {

const dialogRef = this.dialog.open(DialogComponent, {
  // dialog open parameters
        });

 dialogRef.afterClosed().subscribe(result => {
         console.log(result);
          if (result === 'submit') {
            }
   }
}

Also you can send json data to parent of dialog component like:-
this.dialogRef.close({ event: 'submit' });

[shral]

You don't even have to use EventEmitter just add a function as parameter the advantages over the subscribe/EventEmitter-methode are that you can talk back to dialog than again like this:

//ParentComponent

let dialogRef = this.dialog.open(DialogComponent);
dialogRef.componentInstance.params = {
    title:"My title",
    testFunction:(fromDialog)=>{
        //manipulate data for dialog do something with `fromDialog`
        //return something back to dialog if you want
         return fromDialog;
    }
}

//In DialogComponent
//...
params;
//...
 onClick(data){
    let returnedValue = this.params.testFunction(data);
}

...

[galki]

using MatDialogRef as explained here seems like the non-hacky way to do this.

youll notice a small delay between the child and parent closing, so use beforeClosed instead of afterClosed to remove the delay if you wish.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}