Infinite/Virtual Scrolling using Angular Material

Hello Readers,

In this article, we will be implementing infinite scrolling in our angular application. Now, the question comes in mind, what does actually infinite scrolling is and what are the advantages of using it? Yes, you will get answer to all these questions by the end of the article. But, let me show you first what we will be developing by the end of this article.

Well, interesting. Isn’t it? So, when you deal with any application, it is obvious that you must be dealing with thousands of record at a time. So, the next question arises that how to show those thousands of records in a single page?

It is not a good practice to load those thousands of record at the same time into the page. There comes the infinite scrolling in the picture. Rather than loading thousands of record at a time, load only those records which fit your screen. And, as user scrolls down, load more records which again fit the screen.

Isn’t this feature is required in even small-scale application. Right!? So, let’s start implementing it.

So, the first step is to create new app, install Angular Material into your app and run it.

Ng new angular-scrolling-app

Cd angular-scrolling-app

ng add @angular/material

ng serve

Here, I am adding the screenshot of the process that above mentioned material command will do.

Angular material will add BrowserAnimationsModule to your app.module.ts. Now, the obvious question is what is Angular Material?

It is library developed by Angular Team. Buildings of high quality UI Component build on Angular and based on Google’s Material.

Earlier, to install angular material on your computer we had to go through tedious long steps. Now, it is replaced by one single command.

So, now let’s move to next part. Open up your newly created angular application. And add this into your app.module.ts

Now, next question is we are importing scrolling from @angular/cdk. So what is CDK? Right!? CDK give developers more tools to build awesome components for web. Also, it allows us to use features of angular material without adopting the material design visual language.

Now, next step is on app.component.html and add following code.

Cdk-virtual-scroll-viewport has one property that needs to be set is itemsize. It defines the size of an individual item.

Next, I am looping through the array of numbers which has almost 10000 records in it (just to show you, as I have mentioned, infinite scrolling is useful when we have tons of record) using cdkVirtualFor which is same as our ngFor.

Here, I am binding my item in p tag, where I have applied some styling. One of the important styling is animated slideInRight. Which will bring records from the right side which will give you a visual effect of actual working of infinite scrolling.

Next, to run this successfully on your machine, add following code on your app.component.ts file.

Yes, so now it should work on your machine.

Thank you!