In this tutorial, we are going to present ways of detecting when an
Input() value changes in a component in Angular 2+.
2. Ways to detect when an
Input() value changes
ngOnChanges(changes: SimpleChanges)lifecycle method:
- Using input property setter
@Input() set value(value: string):
The first approach requires that our component will implement
OnChanges interface. The
ngOnChange() method will get all changes for all the
Input() values. We are also able to compare the current and previous values of the input. It should be useful when our component has more than one
When we want to check if a particular
Input() value changes, then using
property setter seems to be a simpler solution. But, keep in mind that in this approach you will not be able to compare the actual and previous value of the input.
3. More about
@Input() decorator marks the field in the Angular component as an
input property. That property is bound to a DOM property in the HTML template.
Input() decorators are used for sharing data between a parent component and one or more child components.
In this article, we presented several ways of detecting
Input() value changes in Angular. We also described a bit the