Currently, I am facing an issue where I am utilizing two-way data binding to call a function in my template.
template.html
{{arePresent()}}
This function essentially checks if I have a @Input variable named length of type string []
component.ts
@Input inputVar: string[] | undefined
.
.
arePresent():boolean {
return this.inputVar?.length > 0;
}
Upon discovering performance concerns related to my current implementation, it has been suggested to utilize a setter or ngOnChanges lifecycle hook. I decided to try the following approach:
component.ts
variableToBindInTemplate :boolean;
@Input inputVar: string[] | undefined
.
.
ngOnChanges(changes:SimpleChanges):void {
this.variableToBindInTemplate =changes.inputVar?.currentValue?.length > 0;
Subsequently, in my template, I only bind {{variableToBindInTemplate }}.
Unfortunately, it appears that the variable is being received as undefined.
Could you advise on whether using a setter or implementing the onPush change detection strategy would be more suitable in this scenario? If so, could you provide guidance on how to modify my component to incorporate a setter?