How to detect user has reached end of list in virtual scroll angular 7?

Question

I'm getting data from rest api in batches of 25.I'm using virtual scroll to display data.Now when these 25 items are scrolled,i need to query for next 25 items.How to detect when user reaches end of list ??

Answer 1

Get reference of Virtual Scroll using the @ViewChild

 @ViewChild(CdkVirtualScrollViewport)
  viewport: CdkVirtualScrollViewport;

To check scroll reach to end using below code.

const end = this.viewport.getRenderedRange().end;

and using following condition you can determine the reached at end to load next items

const total = this.viewport.getDataLength();
if (end === total) {
    //Load next items
}

Here is example infinite-virtual-scroll-angular

Answer 2

Get the scroll component as a child in the parent component

@ViewChild(CdkVirtualScrollViewport)
viewport: CdkVirtualScrollViewport;

Add a method that is triggered when scrolling happens

scrollEvent(): void {
    
  if (this.viewPort.measureScrollOffset('bottom') < 10) {
       // scrolled to the bottom, change  
  }
    
}

Trigger this method on the scroll

<cdk-virtual-scroll-viewport (scrolledIndexChange)="scrollEvent()"></cdk-virtual-scroll-viewport>