I want to use ngStyle inside ngFor and call a function that transforms data in a circle. The Problem is if I am getting about 10000+ data it lags and keeps freezing. The transform of them is one part, but at least afterward they loaded it should run normally again, but it doesn't do that because of ngStyle. ngStyle (and all other two way bindings) calls the function every time I move around with the mouse or it detects changes.
So my question: is there a way to get around these multiple calls and just call 1-time ngStyle for every Data Element or is there another way to Change the style of an Element by calling a function inside a ngFor? (tried also with viewChild, but didn't work yet).
component.html
<div *ngFor="let data of arrData; let i = index">
<ul>
<!-- rotateAngleArray got numbers which defines the position/direction
of the data -->
<li [ngStyle]="{ 'transform': 'rotate(' + rotateAngleArray[i] + 'deg) translate(0,' + -objHeight + 'px) rotate(' + -rotateAngleArray[i] + 'deg)' }">
<!-- or <li [ngStyle]="getRotation()" ... same result -->
<div>{{ data }}</div>
</li>
</ul>
</div>
