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.

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
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);
}
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!!!



