Subscribe Us

Angular Material Virtual Scrolling Tutorial



Angular Material Virtual Scrolling

Angular Material Virtual Scrolling


 Introduction


Welcome back everyone in this tutorial 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.

Description


Let'see how that can be done in this tutorial the first step we need to import the scrolling module from angular cdk so in
app.module.ts import scrolling module from @angular/cdk/scrolling.

Next add it to the imports array so scrolling module added to the imports array.

imports: [ BrowserModule, AppRoutingModule, BrowserAnimationsModule, MaterialModule, ScrollingModule]

Now for the second step we are going to create an array of a thousand numbers so in the component class which is app.component.ts file I'm going to create a new property numbers which are going to be an array then in the constructor

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

Alright now that we have a huge list of numbers let's render them in the HTML. I will first render them with the ngfor directive and then show you how it works with virtual scrolling so in the HTML add a div tag and then add the ngfor directive.

 <div *ngFor="let number of numbers" class="number">{{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

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

I'm going to add the class number alright if we now save the file 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 ng for directive.





Now let's 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 item size attribute and this is an indication of the size of each element. I have specified item size as 100. So in the number class as well let's add height is equal to a hundred next, we need to specify a height for the viewport itself and for that, I'm going to create a CSS class this is going to be called container and I'm going to set the height property to 400 pixels and back in the HTML on the viewport class is equal to container now each element is a hundred pixels tall and the
viewport is 400 pixels tall so we should be able to see four elements at any given time.

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

.container{
    height: 400px;
}

Back in the HTML I'm going to move this div tag within the viewport now for the actual list of numbers, we do the same as what we did before with ng  for the only difference now is that we are going to use cdkVirtualFor instead of ngFor so cdkVirtualFor this is the directive you have to make use of inside a virtual scrolling container and that is pretty much it.

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

If you now save the files and go back to 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 a handful of them as you scroll the Dom nodes update to reflect the numbers being displayed.

 


Summary

So this way we can implement a more performant list to display items all right with that. Thank you guys for reading don't forget to subscribe and enable notifications I'll see you guys in the next tutorial.

You can find the source code at my github link download source code








Post a Comment

0 Comments