Infinite Scroll with Angular 8 CDK mocked by Azure API Management

I tried in this article to create an Infinite Scroll using Angular 8 and Azure API Management to mock data. Possible alternatives could have been Azure Function’s Proxies.

All the code may be found at:

albertodenatale/infinitescroll

Create a virtual scroll

For the front-end I took inspiration from this video that is very well done:

After creating a new Angular project using Angular 8, This might be done as explained in:

Angular Material

npm install --save @angular/material @angular/cdk @angular/animations

This is the “package.json”:

I will then import the “ScrollingModule” and the “HttpClientModule”:

I will add a service:

Wrap it in the component:

Adding the template:

With Azure API Management

I created an API on Azure using AzureApiManagement and mocked the responses:

The API returns an array of 50 items like this one:

"example": [{
"name": "You are Awesome"
}, {
"name": "You are Beautiful"
}, {
"name": "You are Impressive"
}, {
"name": "You are Magnificent"
}
(...)
]

Styling the list

I used flex boxes to style the list, a nice guide may be found here:

A Complete Guide to Flexbox | CSS-Tricks

I order to animate each item, I will use the library “animate.css”:

Animate.css

In order to install the library I run:

npm install animate.css --save

I imported the class from the “styles.scss”:

These are the styles I used:

What the styles do is mainly:

• Set up the flex layout

• Style the flex items

• Hide the vertical scroll from the flex container

• Color the children

Set the animation-delay:

Infinite and Beyond

To turn the virtual scroll into an infinite scroll, the following steps will be needed.

I will attach a handler to the event “scrolledIndexChange” of the CDK Virtual Scroll Component.

I will then add a hook from the component to the :

I implemented getNewData() to retrieve the index of the last rendered item on the page if the index equals the total number of items currently loaded, the array is completely refreshed:

A possible optimization, as shown in the video above, could be not re-rendering the entire list.