lifecycle hooks of input population from sibling component angular2

Question

I have two siblings component like below

<broker-list (onBrokerClicked)="onBrokerClicked= $event"></broker-list>
<station-list [(broker)]="onBrokerClicked" [(ngModel)]="stations"></station-list><!--broker is an input-->

when user click on broker-list, in station-list component broker which is an @Input gets populated. ngModel in stationlist can be populated only after it's sibling component is clicked or in other words the input broker gets populated. I want the exact moment when the input gets populated form the sibling component which is not in ngOnInit. is there any event or something which is raised after input population that I can do some stuff in it???

``ngOnChanges()`` looks for any changes in the input. Use ``ngOnChanges()`` by importing ``OnChanges`` from ``@angular/core`` — CruelEngine, Jun 06 '17 at 12:22
should I use it in my template and bind variables to it?? @CruelEngine — Paridokht, Jun 06 '17 at 12:25
in your station-list component , add ngOnChanges() in the same way as you add ngOnInit. So whenever your input data changes , ngOnChanges will be fired. — CruelEngine, Jun 06 '17 at 12:33
could you please answer the question so I can accept it as an answer. @CruelEngine — Paridokht, Jun 07 '17 at 06:23
@Parid0kht You forgot to add `get` method as well. Hence you are getting it `undefined`. Updated my answer. — Amit Chigadani, Jun 07 '17 at 06:55

Amit Chigadani · Answer 1 · 2017-06-07T06:56:33.640

1

Add setter method to Input() property

station-list.component.ts

private _broker;

@Input() set broker(value) {
     this._broker = value
     // do the stuff every time when broker value is changed
}

get broker(value) {
     return this._broker;
}

edited Jun 07 '17 at 06:56

answered Jun 06 '17 at 12:29

Amit Chigadani

28,482
13
80
98

what is the difference between using this and `ngOnChanges`?? – Paridokht Jun 07 '17 at 05:20
Only difference is you have to add one more check while using `ngOnChanges()`. for ex : `if(changes['broker'])`. If you use setter no need to do that. And as you want to do the computation only when `broker` property changes, this would be the appropriate place. `setter/getter` are meant for that. – Amit Chigadani Jun 07 '17 at 05:32
for the first time which my component is loaded `set` is called with`undefind` value which must be checked like `ngOnChanges` – Paridokht Jun 07 '17 at 06:17
Even for the first time in `ngOnChanges()`, value would be `undefined`. – Amit Chigadani Jun 07 '17 at 06:24
sure..I did not have to use `if(changes['broker'])` because I have only one input (as I understand).. when I use `setter` in other methods I have to use `this._broker` instead of `this.broker`..because `this.broker` is `undefined`. and I have to change all of them – Paridokht Jun 07 '17 at 06:28
No. you would be still using `this.broker` at all the places. `this._broker` will be used only within your `set` method. – Amit Chigadani Jun 07 '17 at 06:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/146025/discussion-between-amit-chigadani-and-parid0kht). – Amit Chigadani Jun 07 '17 at 06:52

score 1 · Accepted Answer · answered Jun 07 '17 at 06:27

1

You can Use ngOnChanges by importing onChanges from @angular/core.

What ngOnChanges does ? ngOnChanges gets fired whenever input values change.

import { onChanges } from @angular/core;

define your ngOnChanges inside the class :

export your_class_name implements onChanges{

 ngOnChanges(){
 //Do your stuff with the input
 }
}

answered Jun 07 '17 at 06:27

CruelEngine

2,701
4
23
44

does it only fire for `input` changes?? – Paridokht Jun 07 '17 at 06:30
ngOnChanges() : Respond when Angular (re)sets data-bound input properties. The method receives a SimpleChanges object of current and previous property values. Called before ngOnInit() and whenever one or more data-bound input properties change. Taken from : https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html – CruelEngine Jun 07 '17 at 06:31

lifecycle hooks of input population from sibling component angular2

2 Answers2