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.

How to load large lists with Angular
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.

Conclusion

We have explored Virtual scrolling using CDK package with basic example for more complex scenario refer Angular CDK Docs.

Happy Coding!!!

Detecting ad block on your site using javascript
Subscription model is the future, monetisation using advertisement plays big contribution for our revenue.
How to create filters in NuxtJS
Filters are reusable code for text formatting, It can be used in mustache interpolations and `v-bind` expressions.
Angular - Lazy load images in simple way
What is Lazy loadLazy load technique defers the loading which is not visible in the viewport. Loading content only when the viewport is visible. This technique often used for better performance and improves the loading time of the website. We can accomplish with the help of custom library like ng-l…
Getting started with YAML
YAML is popular language for configuring the devOps tools. Learn how to use the YAML variables, YAML syntax and YAML validators.