angular2 lazy loading or pagination on scroll

Question

How create true lazy loading? Problem is next: i have create lazy loading on scroll. I use infinite-scroll on scroll fires event and i get next page and concat with array on page1. But i think it not true because i increasing array. Help please how create lazy load with out increasing array?

onScroll() {
    var inOrOut = this.selectedType.inOrOut == 'incoming' ? 1 : 0;
    if(this.selectedType.page.page !== false) {
        this.selectedType.page.page = this.selectedType.page.page + 1;
        this.getMessagesForPage();
    }
}

getMessagesForPage() {
    var self = this;

    this.messageSmsService
        .getMessagesForPage(this.page)
        .subscribe(
            result => {
                self.allData[ self.selectedType.type].push(result);
            },
            error => {...})
}

score 0 · Accepted Answer · 2019-01-04T12:53:14.250

There is virtual-scroll. It is not browser (windows) scroll. Fundamental difference is rewriting html by request. Usually scroll draw all html, and virtual-scroll visible part.

Add in template.

 <virtual-scroller 
            [items]="buffer"
            (vsUpdate)="scrollItems = $event"
            (vsEnd)="getMessagesForPage($event)">

            <div *ngFor="let item of scrollItems"> </div>

 </virtual-scroller>

vsEnd - is event when we achieve "underwold".

and getMessagesForPage was changed so.

public getMessagesForPage(event: ChangeEvent) {
  if (event.end !== this.buffer.length-1) return;

  this.getData(this.buffer.length, 10)
      .subscribe(
         result => this.buffer = this.buffer.concat(result)
       )
    }

I am adding to buffer elements but I don't draw all html into scroll

angular2 lazy loading or pagination on scroll

1 Answers1