Building infinite virtual scrolling lists | Angular CDK scrolling | Angular Performance
Better and Dynamic way of rendering long lists of items in DOM
When we work with large list of data, then handling that data in DOM is always a challenge in terms of efficiency and better performance.
When we try to load that data in DOM, it will create nodes in DOM with the size of data and it will start bloating our DOM and page with a long list of data.
Example-
if data is an array [] with length 100<div class="example-viewport">
<div *ngFor="let item of data" class="list">
<h2>{{item.name}}</h2>
</div>
</div>As data [] has length 100, it will create 100 nodes in DOM.
Problem —
In the above example, we have taken a data of length 100, suppose it has more data then it will create more nodes in DOM, and with an increase in data size it will slow our application, it will start bloating our DOM and page.
Solution
Angular(7+) gives us access to a new virtual scrolling behavior in the Material Component Development Kit (CDK). It provides tools for looping over data that only renders elements when they are visible in the viewport, and it provides a better and dynamic way of rendering long lists of items in DOM efficiently.
Component Development Kit (CDK)-
it is a set of tools that implement common behaviors, It is a kind of abstraction of the Angular Material Library, with no styling specific to material design.
Let’s Implement infinite virtual scrolling
Prerequisites — Angular (version 7 or 7+), Node version 11.0 or above
Step- 1- Add the @angular/cdk package
npm install @angular/cdk
Step -2 import ScrollingModule to your module
import { ScrollingModule} from '@angular/cdk/scrolling';
imports: [
...,
ScrollingModule
]
Step- 3 Inside your component
Wrap your looping element inside <cdk-virtual-scroll-viewport>
</cdk-virtual-scroll-viewport>use *cdkVirtualFor instead of *Ngfor itemSize directive tells how tall(height of height) each item will be(in pixels). So, itemSize="100" means that item in the list will require 100px of height.<cdk-virtual-scroll-viewport itemSize="100">
<li *cdkVirtualFor="let item of data">
<!-- Print item here -->
</li>
</cdk-virtual-scroll-viewport>
Congratulations, you are done with basic infinite virtual scrolling. It will improve page performance and the data loading experience.
Bonus info with advance features of cdk-virtual-scroll
Custom Events — Listen to the event when a specific item is scrolled to
<cdk-virtual-scroll-viewport itemSize="100" (scrolledIndexChange)="scrollhandler($event)">
</cdk-virtual-scroll-viewport>
Access to CdkVirtualScrollViewport and its method
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';@ViewChild(CdkVirtualScrollViewport)
viewport: CdkVirtualScrollViewport;Access methods like
this.viewport.scrollToIndex(23)
*cdkVirtualFor provides some logical variables on your template
<cdk-virtual-scroll-viewport itemSize="100">
<li *cdkVirtualFor="let item of data; let index = index;
let count = count;
let first = first;
let last = last;
let even = even;
let odd = odd;">
<!-- Print item here -->
</li>
</cdk-virtual-scroll-viewport>
Happy Learning… 👏👏👏