Following our theme of lifecycle methods with ngOnChanges
and ngOnInit
, I want to give you another interesting trick to be notified when an @Input
value changes.
We’re already familiar with that syntax:

But what if instead of applying @Input
on a class property, we used it on a setter:

The input works the same as before, with the advantage of running several instructions when a new value is set. All of that without using ngOnChanges
. This approach is practical if you have several side-effects to trigger depending on which input changes, which would be tedious to handle with multiple conditionals:

The setter approach brings more clarity and leaves less room for mistakes:
