Angular Virtual and Infinity Scrolling

.container 
{
height: 200px;
width: 200px;
border: 1px solid black;
overflow: scroll;
}
.item { height: 50px; }
export class VirtualScrollComponent { 
items = [];
pageSize = 10;
fetchedRanges = new Set<number>(); @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
constructor() { } onScroll(): void {
const renderedRange = this.virtualScroll.getRenderedRange();
const end = renderedRange.end;
const total = this.items.length;
const nextRange = end + 1;
if (end == total && !this.fetchedRanges.has(nextRange)) {
this.items = [...this.items, ...this.loadData(nextRange, this.pageSize)];
this.fetchedRanges.add(nextRange);
}
}
private loadData(start: number, size: number): string[]
{
if (start === 100000) {
return [];
}
return this.range(start, size);
}
private range(start: number, size: number): string[] {
return [...Array(size).keys()].map(i => `Item #${i + start}`); }
}

--

--

--

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

WebdriverIO — Open multiple browser tabs

The basics of Tree data structure

The Journey of a Programmer

CORS workaround to consume RSS in a React App

Nuxt Authentication from Scratch

Creating your first Vue.js App

React Weekly Issue 12

NodeJS — MongoDB & Heroku development

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
AG Dev

AG Dev

Senior Front End Software Engineer focused on Angular. Passionate about learning new skills and sharing my knowledge. Blog agdev.tech in progress.

More from Medium

Migrating Angular application from TsLint to EsLint

The MVC Architecture in Angular

Lazy Loading in Angular

Angular vs AngularJS: Differences You Are Not Aware!