November 27, 2018

Improve performance with virtual scrolling in Angular – HowTo

Since the release of Angular 7, the Angular CDK includes a feature that can improve the performance of your application dramatically. Virtual scrolling is highly beneficial for dealing with a lot of data in tables or lists. You can improve performance for large lists in Angular with the Angular CDK virtual scrolling component.

What is virtual scrolling

I could explain what virtual scrolling is, but I couldn’t do it as good as some other folks, so I’m going to recommend that you watch the following talk instead. The first 5 minutes should give you a rough idea.

What is the Angular CDK

The feature is not included in the @angular/core package but is bundled within the Angular CDK.

The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation.

In more simpler terms you could say, that the CDK is the backbone of Angular Material and provides the base functionality without including any styling.

Virtual scrolling performance demo time

The code we are looking at in this post is hosted on Stackblitz:

Start with a plain Angular table

We’re starting with a pretty simple example of a table using a *ngFor loop

We define the tableData property in the corresponding component.ts file.

Introducing virtual scrolling

The Angular CDK provides a scrolling component. We’re now going to add it to our plain table in 4 simple steps.

1. Add the dependency

2. Add ScrollingModule

3. Add virtual scrolling component

Step 2 is to add the <cdk-virtual-scroll-viewport> element around the markup of your table. We need to provide the attribute [itemSize]=”heightOfRowInPx” that tells the scrolling component how high each row is.

4. Replace *ngFor with *cdkVirtualFor

Instead of using *ngFor we’re going to use *cdkVirtualFor.  This way the virtual scrolling works as intended.


If we inspect the DOM changes after introducing the <cdk-virtual-scroll-viewport> we see that the browser is removing and adding DOM Nodes as we are scrolling.

improve performance with virtual scrolling
Angular adds/removes DOM Nodes to achieve a performant virtual scrolling

Improvements / Hints

  • Depending on the layout of your application you might need to set a height for the <cdk-virtual-scroll-viewport> element.
  • Use the trackBy function of *ngFor whenever you can like shown here.
  • For more information on how to optimize performance when loading big and expensive lists, we recommend you our blog post regarding this topic.


One thing that is obvious while using angular CDK virtual scrolling, is that it comes with quiet a lot of magic. The options to fine tune the virtual scrolling behaviour are limited. If you are interested in alternatives to optimize the loading of large lists or lists with expensive elements, we encourage you to have a look at ngx-infinite-scroll.

Infinite-scroll has the same goal as virtual scrolling, yet the strategy differs a bit. While virtual scrolling only renders the list the visible elements, infinite scroll loads the elements lazy. So if I scroll down the list and reach a defined area at the end of the already loaded elements, it triggers a function that loads the next x elements. The same can be implemented for scrolling up.

One big benefit of using infinite scrolling is the control you get over the displayed items. So if you want all loaded items to be available after they have been loaded lazily, infinite scroll is your friend.

Further Reading


Related Posts

theCodeCampus Autor Kai Henzler

Kai Henzler
Developer at thecodecampus </>

Kai belongs to the generation, which grew up with the internet. His motto is „keep it simple“, which he applies both in web development with AngularJS and as a trainer.

7 responses to “Improve performance with virtual scrolling in Angular – HowTo”

  1. Manikandan says:

    I want to use virtual scroll for column also. is it possible for nested virtual scroll

  2. sagar jadhav says:

    is there any example without using CDK means custom virtual scrolling component?

  3. Qem says:

    can I use it on the whole page not a specific view port – I am trying to avoid scrolling inside the page

  4. Sumedh says:

    That was a great thing I have learnt today.

  5. jimmy says:

    how does virtual scroling work for nested table

  6. varun says:

    will search work with virtual scrolling??

Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

code block

Your email address will not be published.