4

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. performance tab screenshot

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?

mmrzk
  • 83
  • 7

0 Answers0