Angular 2 Performance Optimization for a Large List of Elements

Question

Suppose I have a component that 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 the 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 Download More link, and new items are retrieved from the server and added to the list, does Angular 2 redraw the complete list or just add new items to the DOM?

If he redraws the full list, is there a way to just add the elements just added. Can ChangeDetectionStrategy.OnPush be useful in this situation?

20 , 20 . , , 1000 2000 . Angular , .

Can @ngrx/store ?

Answer 1

*ngFor , . , , , .