Parent/Child Component Interaction - Return values using EventEmitter angular2

Question

1) I have a child component (CounterComponent) that emits an event using @Output 2) The child component also has an Input parameter callBackCancelled. 3) The parent component (AppComponent) sets the callBackCancelled value to "true" but in the child component that value is still undefined.

See the plunker sample https://plnkr.co/edit/2vnTUEDyBKT59GDTvkEJ

callbackFunction(e) {
alert('emitting event from child callback button component');
this.callback.emit(e);

alert('Now in child component, this value should be true, but it is:  ' + this.callBackCancelled);

}

Can someone help?

this.callBackCancelled will be true at ngOnChanges lifecycle hook. And since you don't have Output for "callBackCancelled", you should use it so: [callBackCancelled] without brackets. — omeralper, Dec 01 '17 at 00:30

score 0 · Accepted Answer · answered Dec 01 '17 at 01:15

Practically, this alert('Now in child component, this value should be true, but it is: ' + this.callBackCancelled); gets called before the below:

btncallback(event) {
    console.log(event);
    this.callBackCancelled = event;
    alert('Parent component sets the callBackCancelled value to true.');
  }

so by that time, this.callBackCancelled is still undefined. There are couple of ways to get this to work.

A Service
Implements ngOnChanges()

Here's an example of the latter:

Get rid of () from [(callBackCancelled)]
implements the following:https://plnkr.co/edit/qDG0dK01USbN1ifVFXvl?p=info

Parent/Child Component Interaction - Return values using EventEmitter angular2

1 Answers1