A better and more dynamic way of rendering long lists of items in the DOM When we work with a large list of data, handling that data in the 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 more dynamic way of rendering long lists of items in DOM efficiently. 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. Component Development Kit (CDK) Let’s Implement Infinite Virtual Scrolling Angular (version 7 or 7+), Node version 11.0 or above Prerequisites — 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">
      
  </li>
</cdk-virtual-scroll-viewport> Congratulations, you are done with basic infinite virtual scrolling. It will improve page performance and the data loading experience. Additional 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;">
      
  </li>
</cdk-virtual-scroll-viewport> Happy Learning… 👏👏👏 This article was first published here

React 18 new features

Set or Update New Title and Meta Tag - Angular

Website

Nominated for 2022 - HackerNoon Contributor of the Year - Flutter

Nominated for 2022 - HackerNoon Contributor of the Year - Css3

Nominated for 2022 - No No No Nodejs

Nominated for 2022 - HackerNoon Contributor of the Year - News

Too Long; Didn't Read

Make resilience your competitive advantage

Render Lists using Infinite Scroll in AngularJS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Angular v14's New Features

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Angular v14's New Features

10 Useful JavaScript Functions to Learn

10 Cool Angular Material Admin Dashboard Templates

13 Angular App Optimization Tips for Frontend Developers

25 Stories To Learn About Angularjs

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps