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.
-
1. Angular Material - Getting Started
-
2. Angular Material - Material Module
-
3. Angular Material - Typography
-
4. Angular Material - Buttons
-
5. Angular Material Button Toggle
-
6. Angular Material Icons
-
7. Angular Material Badges
-
8. Angular Material Progress Spinner
-
9. Angular Material Navbar
-
10. Angular Material Sidenav
-
11. Angular Material Menu
-
12. Angular Material List
-
13. Angular Material Grid List
-
14. Angular Material Expansion Panel
-
15. Angular Material Cards
-
16. Angular Material Tabs
-
17. Angular Material Stepper
-
18. Angular Material Input
-
19. Angular Material Select
-
20. Angular Material Autocomplete
-
21. Angular Material Checkbox & Radio Button
-
22. Angular Material Date Picker
-
23. Angular Material Tooltip
-
24. Angular Material Snackbar
-
25. Angular Material Dialog
-
26. Angular Material Data Table
-
27. Angular Material Exploring Data Table
-
28. Angular Material Data table Filtering
-
29. Angular Material Data Table Sorting
-
30. Angular Material Data Table Pagination
-
31. Angular Material Virtual Scrolling