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… 👏👏👏