November 27, 2018

Virtual Scrolling in Angular 7

The release of Angular 7 includes a feature that can improve the performance of your application dramatically. Virtual scrolling is highly beneficial when your app has to deal with a lot of data that has to be displayed in tables or lists.

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.

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.

https://material.angular.io/cdk/categories

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.

Demo Time

The code we are looking at in this post is hosted on Stackblitz: https://stackblitz.com/edit/angular-virtual-table-scrolling

Start with a plain Angular table

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

The tableData property is defined 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 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 that is needed in order for the virtual scrolling to work as intended.

Result

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.

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

Further Reading

Kai Henzler
Developer at thecodecampus </>


Leave a Reply

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

```
code block
example
```

Your email address will not be published.