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???

Answer 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
 }
}

Answer 2

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;
}