I have been working on optimizing a complex Angular component that frequently updates data. I have implemented the OnPush change detection strategy, which has significantly reduced the number of calls to property getters. However, I have noticed that HostBindings are still being checked the same number of times as they were with the Default strategy.
Is there something I am overlooking or does OnPush have no impact on HostBindings?
For reference, here is a SlackBlitz example where you can view the console logs: https://stackblitz.com/edit/angular-9w6nwd?file=src/main.ts
Below is a snippet from the example:
@HostBinding('[attr.style]')
get styles(): string {
console.log(`cd count: ${++this.cdCount}`); // continues to be called the same number of times
return `--dynamic-height: ${this.calculatedHeight}`;
}
cdCount = 0;
showLinkCount = 0;
calculatedHeight = 0;
private _showLink = true;
set showLink(val: boolean) {
this._showLink = val;
}
get showLink(): boolean {
console.log(`link count: ${++this.showLinkCount}`); // only checked when calling this.cd.detectChanges()
return this._showLink;
}