Angular2 Call Function When the Input Changes

Question

Child component:

export class Child {     @Input() public value: string;     public childFunction(){...} } 

Parent component:

export class Parent {     public value2: string;     function1(){ value2 = "a" }     function2(){ value2 = "b" } } 

Parent view:

<child [value]="value2"> 

Is there any way to call childFunction() every time the value2 is changed in this structure?

Answer 1

You can use the ngOnChanges() lifecycle hook

export class Child {     @Input() public value: string;      ngOnChanges(changes) {       this.childFunction()     }     public childFunction(){...} } 

or use a setter

export class Child {     @Input()      public set value(val: string) {       this._value = val;       this.childFunction();     }     public childFunction(){...} }