Geek Answers Handbook

Slow rendering of a template using angular2 * ngFor

How to improve performance when rendering a template multiple times using ngFor? I have a situation where I need to show the same template based on count. I do this using * ngFor. The template loads correctly, but performance worries me. Since I need to repeatedly show the same content several thousand times, then the performance will be slow after loading the template. I did a plunker demo here http://plnkr.co/edit/qTj4SVRnFD6N15PZ1GWC?p=preview . please increase the number of form groups in formarray with a difference of 1000, then the system will be slow or break. This is how I create formarray,

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

And I am creating 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>

Can someone suggest me an approach where I can increase productivity after loading the template? Because I'm fine with the expectation of loading the template if it should display thousands of records. But as soon as the template is ready, I want the system to be fast in this case, using * ngFor. Someone please help me in solving this problem. Thanks!

+7
angular
source share
2 answers

By default, angular checks for changes to be detected for each component in the tree.

So, for example, if you bind the key up to your input components, everything will be pretty messy.

Learn more about change detection here: fooobar.com/questions/120193 / ...

+4
source share

You can also improve performance by only visualizing visible patterns. Let's say that you start rendering 10 templates, and when you start scrolling (at the bottom of the page), you render more. The web browser takes some time to display all the DOM elements. Just-in-time rendering is better than all-in-one rendering. All data will still be in memory, so you can sort or search for specific patterns.

0
source share

More articles:


All Articles