Slow rendering of template using angular2 *ngFor

Question

How can I increase the performance when rendering a template multiple times using ngFor? I have a situation where I need to show the same template based upon the count. I am doing this using *ngFor.

The template loads correctly but I am worried about the performance. Because I need to repeatedly show the same content for a few thousand times, then the performance will be slow after the template is loaded. I have made a plunker demo here http://plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview - please increase the count of formgroups in formarray with a difference of 1000 then the system will be slow or breaks down.

This is how I create the formarray:

       for(var i=0;i<100;i++){
  let dummyFormGroup=this.fb.group({
    'name':[''],
    'place':['']
  })
  this.dummyFormArray.push(dummyFormGroup);
}

And I render the controls in formarray using ngFor like this:

  <div *ngFor="let formgroup of dummyFormArray.controls"   style="display:flex;flex-direction:row">
<p>
  <label>Name:</label>
  <input type="text" [formControl]="formgroup.controls['name']" />
</p>
<p>
<label>Place:</label>
<input type="text" [formControl]="formgroup.controls['place']" />
</p>

How can I increase the performance once the template is loaded? Because I am OK with waiting for the template to load if it needs to render thousands of records. But once the template is ready I want the system to be fast in this case using *ngFor.

can you clarify what do you mean by slow ? Is it post or pre render ? — Ced, Oct 01 '16 at 13:10
And when the template is ready, editing in the input boxes the text is displayed slowly.This is problem with my code logic right? i mean does *ngFor run any events in the background after the template is loaded? — abhilash reddy, Oct 01 '16 at 13:32
@abhilashreddy Regarding the slow input of text, this is almost definitely down to Angular's change detection. Each time the input is changed Angular will, by default, check for changes in every component. Even though it may not sort out this issue entirely, try changing all your components' change detection strategies to `OnPush` — garethdn, Oct 01 '16 at 14:22
@abhilashreddy http://plnkr.co/edit/FvDEowTn0etWlU1ZLaog?p=preview — garethdn, Oct 01 '16 at 16:07
@Ced Yea...I changed the logic by removing unnecessary events and it works perfectly...Thank You Ced — abhilash reddy, Jan 11 '17 at 04:35

score 5 · Accepted Answer · edited May 23 '17 at 12:02

5

By default angular checks for change detection in every component in the tree.

So for example if you bind key up, to your input components, things are going to be messy pretty fast.

More on change detection here : https://stackoverflow.com/a/39802466/4299560

edited May 23 '17 at 12:02

Community

1
1

answered Oct 06 '16 at 22:01

Ced

15,847
14
87
146

score 1 · Answer 2 · answered Oct 12 '17 at 08:39

1

You could also improve the performance by only rendering the visible templates. Let's say that you start rendering 10 templates, and when you start scrolling (to the bottom of the page), you render more. The web-browser takes some time to render all the DOM-elements. Rendering "just-on-time" is better than rendering "all-at-once". All the data will still be in memory, making sure that sorting, or searching for specific templates may be possible.

answered Oct 12 '17 at 08:39

John

10,165
5
55
71

This is a great idea. BTW, If you want to see an example please checkout the answer here: https://stackoverflow.com/questions/50744285/angular-load-data-on-scroll-for-loop – Jason Liu Oct 12 '18 at 21:21

Slow rendering of template using angular2 *ngFor

2 Answers2