im trying to implement infinite scroll for loading items on to the list dynamically when user scrolls down the list, but when i access the end and total , it is coming as same, i need to check if the last item is reached and then append new items to the list. the problem is both end and total are same and gets triggered everytime
HTML
<cdk-virtual-scroll-viewport style="height: 300px" itemSize="5" (scrolledIndexChange)="nextBatch($event)">
<li *cdkVirtualFor="let row of auditDetails; let j=index;" style="height: 100px; box-shadow: 0 1px 1px black;">{{j}}</li>
</cdk-virtual-scroll-viewport>
TS
auditDetails = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
@ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;
ngAfterViewInit() { }
nextBatch(currIndex: number, items: any[]) {
const start = this.viewPort.getRenderedRange().start;
const end = this.viewPort.getRenderedRange().end;
const total = this.viewPort.getDataLength();
console.log(`end is ${end} total is ${total}`)
if (end == total) {
console.log("end reached increase page no")
}
}
trackByIdx(i: number) {
return i;
}
Stackblitz link https://stackblitz.com/edit/cdk-infinite-scroll-ufuewv