CODEWITHSUNDEEP
angularangular2-templatengrx
Naveed Ahmed
Naveed Ahmed

Reputation: 10386

Angular 2 Performance Optimization for Large List of items

Suppose I have a component which displays a list of items

export class ListComponent implements OnInit{

public list:any;

constructor(private _ls: ListService) {}

    ngOnInit() {
            this._ls.listLoad().subscribe((data) => {
                this.list = data['list'];
            });
    }

    loadMore() {
            this._ls.listLoad(this.page).subscribe((data) => {
                this.list = this.list.concat(data['list']);
                this.page++;
            });
    }

}

and in template we have 

<ul>
    <li *ngFor="let item of list; let index=index">
    {{ item.name}}
    </li>
</ul>
<a (click)="loadMore()">Load more</a>

I want to know that when we click the Load More link and new items are fetched from the server and appended to the list, does the Angular 2 redraw the complete list or just append the new items in the DOM?

If it redraws the complete list, is there any way to just append the newly added items only. Can ChangeDetectionStrategy.OnPush be helpful in this situation?

In my case I initially display 20 items and each click on load more appends 20 more items to the list. I expect when user load more items few times they may have a list of 1000 to 2000 items in the list. And if the Angular redraws complete list on each append, it may result in performance issue.

Can @ngrx/store give some performance benefit?

Upvotes: 4

Views: 2546

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 658225

*ngFor should only append the new items while keeping the existing untouched. There is a known issue if you insert new items at the beginning or in the middle which causes items to be remove and re-added instead of just moved.

Upvotes: 1

Related Questions