I am facing an issue with a table filtering component that contains an input in the form of an array of objects. Upon initialization, all the objects in the array have their property isFiltered: false. However, if I use setTimeout() to display the array after one second, some objects are then shown as isFiltered: true. I attempted to utilize ngOnChanges() to detect these value changes, but Angular did not recognize them.
The service call from the parent component is as follows (we are focusing on this.filters):
this.supportedTypesService
.getSupportedPolicyTypes()
.pipe(
takeUntil(this.ngOnDestroy$),
finalize(() => (this.delayGettingPreferencesOnInit = false))
)
.subscribe((response: PolicyType[]) => {
this.filters = response.map((policyType: PolicyType) => {
return {
value: policyType,
text: PolicyType.getApiValue(policyType),
isChecked: false
};
});
});
this.filters is passed down to the child component in the HTML as
[filters]=filters
The child component code includes:
@Input filters: Filter[]
public ngOnChanges(): void {
each(this.filters, (f: Filter) => {
if (f.isChecked) {
this.isFiltered = true;
return false; // to break from forEach loop
}
});
}
Despite using ngOnChanges(), it does not recognize changes in the array. I also attempted ngDoCheck(), but it resulted in running infinitely, raising concerns about performance issues.