0

I have a parent component which opens a child component in a dialog box:

open() {
        this.dialogRef = this.dialog.open(ItemComponent);

        this.dialogRef.afterClosed().subscribe(result => {

            this.dialogRef = null;
        });
    }

How can I use a variable that is defined and used/modified in the child component to be passed to the parent component?

Jay
  • 329
  • 1
  • 6
  • 22
  • See **Step8** from the answer https://stackoverflow.com/questions/34205593/working-example-of-angular-2-0-material-mddialog-with-angular-2-0/40185852#40185852 – yurzui Jul 12 '17 at 19:17
  • Here's a plnkr link that solves your issue (and mine) [link](http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z?p=info) . All credit goes to Thomas pink. Refer this discussion thread [link](https://github.com/angular/material2/issues/3593) . Hope that helps. – JefferinJoseph Sep 17 '17 at 03:56

1 Answers1

1

Your question is relate to Angular's Component Interaction

At this case, your can use @Output() in your child component:

child.component.ts

@Ouput() childForm = new EventEmitter();

constructor() {
}

someFunction() {
  this.childForm.emit('some data variable')
}

parenet.component.html

<child-component (childForm)="getDataFromChild($event)"></child-component>

parent.component.ts

public getDataFromChild(event: Event) {
  if (event) {
    // do something
  }
}
Bo Chen
  • 156
  • 9