Virtual Scrolling using Angular 7 CDK

Context:

Most times, when working with really long lists in our presentation layer in Angular, we think of additional features that make the experience better. It can be adding pagination or "next" button or a "load more" button. The Component Development Kit has a rolling feature that now helps us get a better and more dynamic way to make the long lists of items in a way that is most efficient and at the lowest price.

Installation:

• Make sure you are running an Angular 7 application
• Type the following command to add Angular CDK version 7.0

NPM
npm install @angular/[email protected]

Angular CLI
ng add @angular/[email protected]

Sometimes we have to show thousands of items at a time in a table or list. Adding these many numbers to the DOM can cause problems and force the program to slow down.

But fortunately, there is a technique called Virtual Scroll to show the goods without slowing the app.

Let us evaluate all the possibilities before entering Virtual Scroll.
There are 3 ways to handle this:

Pagination:

Paginate your list and see items that are lumpy, but you cannot get the entire snapshot of your list at once, and you also have to click back and forth between pages. (for example, Google Search Results)

Infinite Scroll:

Loads only a few points first and continues to add more items to the list as you scroll. It gives the complete snapshot of the list, but as more and more elements continue to add, the list falls as the number of nodes in the DOM increases and the application, therefore, begins to fall.

Virtual Scroll:

Show the only a small subset of the data in the viewport and continue to change the entry that the user scrolls. It keeps the number of DOM elements constant and thus increases the program performance.

NOTE: Virtual Scroll is simply a strategy that can be used within a list or even infinitely rolling. It can be a plain list or infinite scroll or for that matter any other strategy you may prefer.

Setup:
1. Import Scrolling Module into your application app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ScrollingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Generate 10000 items list in your app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numbers: number[] = [];

  constructor() {
    for (let _index = 0; _index < 10000; _index++) {
      this.numbers.push(_index);
    }
  }
}

3. Let’s render the list in app.component.html file

Preview:

Conclusion:

The component development package includes many features that help developers improve the development of the user interface. This guide gives you a quick guide to the syntax and use of the virtual scroll function.