Infinite Scrolling In Angular Application

In this article, we will be implementing infinite scrolling in our angular application. Now, the questions come to mind: What does infinite scrolling actually mean and what are the advantages of using it? You will get answers to these questions by the end of the article. But, let me first show you what we will be developing in this article.

 

Interesting, isn’t it? So, when you deal with any application, it is obvious that you must be dealing with thousands of records at a time. So, the next question arises --  how to show those thousands of records on a single page?

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

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

The first step is to create a 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 the above mentioned material command will do.

 

Angular Material will add BrowserAnimationsModule to your app.module.ts.

Angular Material is a library developed by the Angular team for building high quality UI Components on Angular and based on Google’s Material Design.

Earlier, to install Angular Material on your computer, you had to go through a tedious long step. Now, it is replaced by one single command.

 

So, let’s move to the next part. Open your newly created Angular application and add this to your app.

 

Now, the next question is - what is CDK?

CDK gives the developers more tools to build awesome components for the web. Also, it allows us to use features of Angular Material without adopting the Material Design Visual Language.

Now, create a new component and add the following code to its HTML.

<cdk-virtual-scroll-viewport itemSize="100" style="height: 100%;" >
  <div  *cdkVirtualFor="let item of arrNumber" >
    <p class="animated slideInRight" style="width: 100%;height: 100px;border: solid 2px blue;display: inline-flex;justify-content: center;align-items: center" >
      {{item}}
    </p>
  </div>
</cdk-virtual-scroll-viewport>

Cdk-virtual-scroll-viewport has one property,  i.e., itemsize which needs to be set. 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, it is useful when we have tons of records) using cdkVirtualFor which is same as our ngFor. 

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

Next, to run this successfully on your machine, add the following code on your TypeScript file.

arrNumber: number[] = [];
  ngOnInit(){
    for (let i = 0; i < 10000; i++) {
      this.arrNumber.push(i);
    }
}

Now, it should work on your machine.

Thank you!