2

I am trying to dynamically create dom node using ngFor on an array. The array may contain 200 elements and instead of creating 200 nodes I intend to create nodes on scroll.For example if initially it is creating 10 dom on scroll it will create next 10 dom and so on without repainting the previous 10 dom. So I presume I will need two index to set upper & lower limit.

I followed this to set a limit but not able to set a range.

So my question is it possible to set two index in ngFor and iterate in that range

brk
  • 48,835
  • 10
  • 56
  • 78

1 Answers1

2

One way to achive this, is to dynamically change your array in the control component. Initially, you only copy the first 10 elements, and on detecting a scrolling event to the bottom, you start to add elements to it.

There is an interesting question, where they do something like this.

If you have a "window" array, you can always control its size and what it contains with events - and it will be fast.

ForestG
  • 17,538
  • 14
  • 52
  • 86
  • in that case I fear will repaint the already painted dom, because if not set limit ngIF will iterate the entire array – brk Mar 26 '18 at 11:34
  • According to this, I think it will not re-paint it all the time, if you are just expanding the list: "As the input list gets modified, ngFor will try to avoid to constantly create and destroy the DOM elements of the list, as this is an expensive operation. Also, when we pass to ngFor a new list, this does not mean that the whole list will be re-built, meaning all the DOM re-created." From [here](https://blog.angular-university.io/angular-2-ngfor/) – ForestG Mar 26 '18 at 11:38
  • Also, you can control the re-use of already rendered DOM areas with the trackBy property, also described in the [blog post](https://blog.angular-university.io/angular-2-ngfor/) – ForestG Mar 26 '18 at 11:41