console.log(`name is changed from ${change.previousValue} to ${value}`);
console.log(`At the moment, age is ${this.age}`)
})
name:string;
age:number;
}
Example 4, using class method reference for onChange (No need to type this as in example 3)
classPersonComponent{
@OnChange<string>('onNameChange')
name:string;
age:number;
onNameChange(value,change){
console.log(`name is changed from ${change.previousValue} to ${value}`);
console.log(`At the moment, age is ${this.age}`);
}
}
Important notes:
PITFALL 1
Arrow function should be avoided as this would make the function lose context. In this case, this would NOT refer to class instance but undefined
For example: it is WRONG to use this way
classMyComponent{
@OnChange(value=>{
console.log(`property1 is changed to ${value}`);
console.log(this.property1)// "this" would refer to undefined, cannot access "property1" of undefined
})
property1:any;
}
Correct way
Change arrow function to es5 function:
classMyComponent{
@OnChange(function(value){
console.log(`property1 is changed to ${value}`);
console.log(this.property1)// "this" would refer to component instance
})
property1:any;
}
PITFALL 2
Callback function CANNOT be referred to class method, this would also cause this to be undefined
For example:
classMyComponent{
@OnChange(this.someFunction)// "this" would refer to undefined, cannot access "someFunction" of undefined