Virtual Scrolling- Angular

Sometimes we as a developer have to show thousands of elements in a single table. When we add these items to one DOM (Document Object Model), it will impact the performance. We can handle this in many ways like pagination, infinite scroll, and virtual scroll.

Pagination: It helps us to list and show items as chunks it works as expected but we have to click back and forward between pages.

Infinite Scroll: At first, it loads a few items and when we scroll, it appends more items. But when more items keep added, the app is going to slow down.?

The virtual scroll is one of the options which helps us to display thousands of items without slowing the app down.

Virtual Scrolling is one of the famous features of Angular 7. This feature included to CDK means 'Component Development Kit'. The virtual scroll shows up the dom elements which are ready to see to the users. By scrolling down it will display the next list. This feature allows only one list at a time which is visible on the screen, this can help in performance and it will be faster than rendering the whole list in one go.

Installation:

Make sure we are using Angular 7 or a higher version to apply virtual scrolling using CDK. Using the following command we can add Angular CDK to our application. After reaching the path of our application executes this command:

npm install @angular/cdk
?
ng add @angular/cdk
        

We have done with installing the dependency of the virtual scrolling module and now move forward to the next step. We are going to create our app for a better understanding of virtual scrolling. We can also implement API data with virtual scroll if there are thousands of items coming from API and we require it to show on-grid or table.

Setup of software:

?First of all, we're going to upload ScrollingModule in our app.module.ts record equal like below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';?
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ScrollingModule } from '@angular/cdk/scrolling';??

@NgModule({

? declarations: [
??? AppComponent
? ],

? imports: [
??? BrowserModule,
??? AppRoutingModule,
??? ScrollingModule

? ],

? providers: [],
? bootstrap: [AppComponent]

})

export class AppModule { }        

After that, we have to generate a list of items in our 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);
??? }
? }

};
        

Next, we have to render this list in our HTML file like below.?

<h1 class="center">Virtual Scroll using Angular 7</h1>
<ul class="list">
? <cdk-virtual-scroll-viewport? style="height: 500px" itemSize="90" >
??? <ng-container *cdkVirtualFor="let n of numbers">
????? <li> {{n}} </li>
??? </ng-container>
? </cdk-virtual-scroll-viewport>
</ul>>        

We can also add a custom style to make app layout more attractive. Below is the output for the same code and we can observe on scrolling down we get the item in chunks and our app will not slow down because of the logic of virtual scrolling.?