I have a virtual scroll in my app that emits a slice of a big array and then I iterate through those items with *ngFor to display a list of li
items that inside have quite a lot of code. Based on the current element from the array it decides which buttons and components inside li
to show. Of course, when I scroll down - a new slice of the array is emitted, so all the bindings are changed and each li
element and its inner parts are getting new data, so change detection takes them all into account.
The problem is that it's lagging a little bit when I scroll down. Performance tab of the Chrome shows that it takes more than 300ms to run change detection for every elment in the list, and I noticed that execEmbeddedViewsAction
is called a few times during those 300ms. Please take a look.
Why does it happen so many times? What are the possible solutions to my problem? Is it worth to encapsulate all the bindings to different components inside li
into one single object, so that those components will have only one @Input
binding?