{"id":1607,"date":"2018-11-27T16:20:33","date_gmt":"2018-11-27T15:20:33","guid":{"rendered":"https:\/\/www.thecodecampus.de\/blog\/?p=1607"},"modified":"2025-04-17T13:32:02","modified_gmt":"2025-04-17T11:32:02","slug":"improve-performance-with-virtual-scrolling","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/improve-performance-with-virtual-scrolling\/","title":{"rendered":"Improve performance with virtual scrolling in Angular – HowTo"},"content":{"rendered":"\r\n

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.<\/p>\r\n\r\n\r\n\r\n

What is virtual scrolling<\/h2>\r\n\r\n\r\n\r\n

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.<\/p>\r\n\r\n\r\n\r\n

\r\n
https:\/\/www.youtube.com\/watch?v=UtD41bn6kJ0<\/div>\r\n<\/figure>\r\n\r\n\r\n\r\n

What is the Angular CDK<\/h2>\r\n\r\n\r\n\r\n

The feature is not included in the @angular\/core<\/strong> package but is bundled within the Angular CDK<\/a>.<\/p>\r\n\r\n\r\n\r\n

\r\n

The Component Dev Kit (CDK) is a set of tools that implement common interaction patterns whilst being unopinionated about their presentation.<\/p>\r\nhttps:\/\/material.angular.io\/cdk\/categories<\/cite><\/blockquote>\r\n\r\n\r\n\r\n

In more simpler terms you could say, that the CDK is the backbone of Angular Material<\/a> and provides the base functionality without including any styling.<\/p>\r\n\r\n\r\n\r\n

Virtual scrolling performance demo time<\/h2>\r\n\r\n\r\n\r\n

The code we are looking at in this post is hosted on Stackblitz:\u00a0https:\/\/stackblitz.com\/edit\/angular-virtual-table-scrolling<\/a><\/p>\r\n\r\n\r\n\r\n

Start with a plain Angular table<\/h3>\r\n\r\n\r\n\r\n

We’re starting with a pretty simple example of a table using a *ngFor<\/strong> loop<\/p>\r\n\r\n

  <table>\r\n    <thead>\r\n      <tr>\r\n        <td>Name<\/td>\r\n        <td>ID<\/td>\r\n      <\/tr>\r\n    <\/thead>\r\n    <tbody>\r\n      <tr *ngFor=\"let row of tableData\">\r\n        <td>{{row.name}}<\/td>\r\n        <td>{{row.id}}<\/td>\r\n      <\/tr>\r\n    <\/tbody>\r\n  <\/table><\/pre>\r\n\r\n
We define the tableData<\/strong> property in the corresponding component.ts file.<\/p>\r\n\r\n\r\n\r\n
\/\/ app.component.ts\r\nimport { Component, OnInit} from '@angular\/core';\r\n\r\n@Component({\r\n  selector: 'my-app',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: [ '.\/app.component.css' ]\r\n})\r\nexport class AppComponent implements OnInit  {\r\n  name = 'Angular';\r\n\r\n  tableData = [];\r\n\r\n  ngOnInit() {\r\n    for (let i = 0; i < 1000; i++) {\r\n      this.tableData.push({\r\n        name: 'Name' + i,\r\n        id: i\r\n      });\r\n    }\r\n  }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\"Angular\r\n<\/picture>\r\n<\/a>\r\n\r\n\r\n
\u00a0<\/h3>\r\n
Introducing virtual scrolling<\/h3>\r\n\r\n\r\n\r\n
The Angular CDK provides a scrolling component<\/a>. We’re now going to add it to our plain table in 4 simple steps.<\/p>\r\n\r\n\r\n\r\n
1. Add the dependency<\/h4>\r\n\r\n\r\n\r\n
npm install\u00a0@angular\/cdk --save<\/pre>\r\n\r\n\r\n\r\n
2. Add ScrollingModule<\/h4>\r\n\r\n\r\n\r\n
\/\/app.module.ts\r\nimport { ScrollingModule } from '@angular\/cdk\/scrolling';\r\n\r\n@NgModule({\r\n  imports:      [ ScrollingModule ],\r\n})\r\nexport class AppModule { }<\/code><\/pre>\r\n\r\n\r\n\r\n
3. Add virtual scrolling component<\/h4>\r\n\r\n\r\n\r\n
Step 2 is to add the <cdk-virtual-scroll-viewport><\/strong> element around the markup of your table. We need to provide the attribute\u00a0[itemSize]=”heightOfRowInPx”<\/strong>\u00a0that tells the scrolling component how high each row is.<\/p>\r\n\r\n\r\n\r\n
4. Replace *ngFor with *cdkVirtualFor<\/h4>\r\n\r\n\r\n\r\n
Instead of using *ngFor<\/strong> we’re going to use *cdkVirtualFor.<\/strong>\u00a0 This way the virtual scrolling works as intended.<\/p>\r\n\r\n
<cdk-virtual-scroll-viewport [itemSize]=\"20\">\r\n  <table>\r\n    <thead>\r\n      <tr>\r\n        <td>Name<\/td>\r\n        <td>ID<\/td>\r\n      <\/tr>   \r\n    <\/thead>\r\n    <tbody>\r\n      <tr *cdkVirtualFor=\"let row of tableData\">\r\n        <td>{{row.name}}<\/td>\r\n        <td>{{row.id}}<\/td>\r\n      <\/tr>\r\n    <\/tbody>\r\n  <\/table>\r\n<\/cdk-virtual-scroll-viewport><\/pre>\r\n\r\n
Result<\/h3>\r\n\r\n\r\n\r\n
If we inspect the DOM changes after introducing the <cdk-virtual-scroll-viewport><\/strong>\u00a0we see that the browser is removing and adding DOM Nodes as we are scrolling.<\/p>\r\n\r\n\r\n\r\n
\"improve\r\n
Angular adds\/removes DOM Nodes to achieve a performant virtual scrolling<\/figcaption>\r\n<\/figure>\r\n\r\n\r\n\r\n
Improvements \/ Hints<\/h2>\r\n\r\n\r\n\r\n