What is the cost of watching a template reference value in Angular

Question

Currently using Angular 8, ended up with a code like this.

<div [style.height.px]="dynamicHeightComponent.offsetHeight">
</div>
<div #dynamicHeightComponent>
...
</div>

Is this a hit to performance, if it is, how can we get a better implementation.

Answer 1

Reading a value from template reference sometimes can be a performance problem, the property offsetHeight definitely will affect the performance. Because when trying to read the value offsetHeight browser will forcefully reflow the layout.

So it depends on which property you are reading. check this list https://gist.github.com/paulirish/5d52fb081b3570c81e3a