How to load large lists with Angular

When we have large items in our list, it will make our application unresponsive by using virtual scrolling we can make our application more responsive no matter how big the list goes.

Vasanth Jagadeesan

Enterprise solution architect

How to load large lists with Angular

Scrolling pattern is used in all major social media site and apps, its commonly most liked UI pattern for the end users. When the size of the list increases, it will start impacting the performance of the application.

Application will slow down because of the on the large list and it should render the list in the DOM. If the list is complex ui design like images or expandable view it will slow down the application performance.

This will impact user experience while scrolling and this will lead to increasing in the exit bounce rate.

What is virtual scrolling

it will only render the list items based on the viewport size or given scroll window size. Entire list is not rendered in the memory. Virtual scrolling is most used technique in all major platforms(iOS, Android, Web and Desktop).

We can achieve this with Angular CDK using ScrollingModule virtual scrolling will be implemented and it will manage large list and reuse the existing DOM.

Getting started with Virtual Scrolling

We need to install angular cdk installed to get started.

npm install --save @angular/cdk

Install angular CDK using npm

Import `ScrollingModule` in app module

import {ScrollingModule} from '@angular/cdk/scrolling';

// app module imports
imports: [
  ScrollingModule
]

Now we have everything setup, let's get into actual code.

@Component({
  template: `<div *ngFor="let item of items">{{item}}</div>`
})
export class ScrollComponent {
  items = Array.from({length: 1000000}).map((_, i) => i);
}

We have created items array with 1000000 items. To add virtual scrolling we need to use <cdk-virtual-scroll-viewport> element from @angular/cdk package.

@Component({  
template: `<cdk-virtual-scroll-viewport>
	<div *ngFor="let item of list">{{item}}</div>
	</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
    items = Array.from({length: 100000}).map((_, i) => i);
}

Angular CDK virtual viewport example

We need to specify the height of the viewport and itemSize for rendering the items in the list that are visible to the viewport.

@Component({  
template: `<cdk-virtual-scroll-viewport itemSize="20" style="height:80vh">
	<div *ngFor="let item of list">{{item}}</div>
	</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
    items = Array.from({length: 100000}).map((_, i) => i);
}

Now switch `ngFor to cdkVirtualFor

@Component({  
template: `<cdk-virtual-scroll-viewport itemSize="20" style="height:80vh">
	<div *cdkVirtualFor="let item of list">{{item}}</div>
	</cdk-virtual-scroll-viewport>`
})
export class ScrollComponent {
    items = Array.from({length: 100000}).map((_, i) => i);
}

List is not managed using virtual scrolling technique. Only items that are visible to the viewport and next subsets are rendered in the DOM and it will only render next set when scroll events occurs.