How to know when @Input changes?

Question

I am passing different id from the parent component to the child component.

// parent component

<child-component id={{id}}></child-component>

// child component

@Input('id') id:string;

How to get an event when id changes? I want to run a function when id changes in the child component.

Thanks

Answer 1

Implement ngOnChanges(changes). It's called when input values change.

It's called once just before ngOnInit()

Answer 2

You can also write a setter. From my experience neither setter or ngOnChanges are called when @Input() is on an array as the reference of array does not change in that case. Luckily ngDoCheck is called if array items change.

https://angular.io/docs/ts/latest/cookbook/component-communication.html