Angular Material Virtual Scrolling

In this lecture let's take a look at virtual scrolling with angular CDK, sometimes you might have to display hundreds or thousands of elements which can be slow in any browser, virtual scrolling will help you in such situations, with virtual scrolling you can display large lists of elements performantly by only rendering the items that fit on the screen, let's see how that can be done in this lecture.

Import the Scrolling module

The first step we need to import the scrolling module from angular cdk, so in app.module.ts import ScrollingModule from @angular/cdk/scrolling and add it to the imports[] array.

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

  imports: [
    ScrollingModule,
  ]

Create a large array of items

For the second step I'm gonna create an array of a thousand numbers in the component class which is app.component.ts.

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

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})

export class AppComponent {

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

}

Implement the list with ngFor directive

Alright now that we have a huge list of numbers let's render them in the HTML. Firstly I'll render them using *ngFor directive and then show you how it works with virtual scrolling, so just add a <div> tag and render the numbers simply.

<div *ngFor="let number of numbers">
  {{ number }}
</div>

I'm also going to add a bit of styling to this <div> tag so open app.component.scss and add a class called .number with this styling.

.number {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid maroon;
  box-sizing: border-box;
}

and in the HTML add the class number to the <div> tag.

<div *ngFor="let number of numbers" class="number">
  {{ number }}
</div>

Alright, if you now save the files and take a look at the browser, you should be able to see all the list of numbers. what I want to focus on though is the Dom itself if I open dev tools. you can see that all of the thousand elements are present in the Dom tree, so this is the list with *ngFor directive.

Implement the list with virtual scrolling

Back in the HTML, the first thing we have to do is create a viewport for the virtual scroll, the component is <cdk-virtual-scroll-viewport> on this viewport we have to define the itemSize attribute and this is basically an indication of the size of each element, let's specify itemSize="100".

<cdk-virtual-scroll-viewport itemSize="100"></cdk-virtual-scroll-viewport>

so in the number class as well let's add height to be 100px.

.number {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid maroon;
  box-sizing: border-box;
  height: 100px;
}

Next we need to specify a height for the viewport itself and for that I'm gonna create a CSS class which is going to be called container.

.container {
  height: 400px;
}

Now let's add that class to the viewport.

<cdk-virtual-scroll-viewport itemSize="100" class="container"></cdk-virtual-scroll-viewport>

Now each element is 100 pixels tall and the viewport is 400 pixels tall, so we should be able to see four elements at any given time.

Back in the HTML let's move the <div> tag within the viewport.

<cdk-virtual-scroll-viewport itemSize="100" class="container">
  <div *ngFor="let number of numbers" class="number">
    {{ number }}
  </div>
</cdk-virtual-scroll-viewport>

Now for the actual list of numbers we do the same as what we did before *ngFor the only difference now is that we are going to use cdkVirtualFor instead of *ngFor.

<cdk-virtual-scroll-viewport itemSize="100" class="container">
  <div *cdkVirtualFor="let number of numbers" class="number">
    {{ number }}
  </div>
</cdk-virtual-scroll-viewport>

This is the directive you have to make use of inside a virtual scrolling container and that is pretty much it, if you save the files and take a look at the browser we should only be seen four elements at a time and as we scroll down we can see the rest of the elements.

But what is important though is observing the Dom tree you can see that instead of rendering all the thousand elements we are now rendering only handful of them as you scroll the Dom notes update to reflect the numbers being displayed.

So this way we can implement a more performant list to display items. Alright with that we come to the end of this angular material course.