Angular 12 and RxJS: Infinite Scroll With API

Infinite Scroll is the ability to scroll through a large infinite list without compromising the performance of application. It improves user experience of the application. In this article I will cover how to implement infinite scroll with API in Angular 12 with the help of RxJS Operators.

How does Infinite Scroll Works

A question comes in mind that how it works internally. It works like there is a big list say 10k items are there. Displaying all those items in once is not possible as it will break the application. And you can not put number pagination as that will look bad on the place or you have dropdown (dropdowns can not have number paginations).

In that case you need infinite scroll. It loads only 10 (size is provided in configuration) records at a time and every time user scrolls to the end of list, application automatically calls the API to fetch next 10 records. So as soon as you reach end of the list, it fetches you the next 10 records. It gives you next results till all the results are finished in database.

Note: I am using Angular 12 and latest versions of RxJS Operators for this example. However the code should work on below versions too. But if you face any issue implementing it in below version, let me know in comments I will check them.

Implement Infinite Scroll in Angular 12 and RxJS

You can download the complete source code from Github link.

Setup an Angular application

You can skip this step if you have an existing angular application.

Create a application with below command:

StackBlogger: Create Angular Application for Infinite Scroll
Create Angular Application for Infinite Scroll

Create a Service file

You can skip this step if you have already a service file.

Run the command to create a service file: app.service.ts

Generate an Angular Service
Generate an Angular Service

Import HttpClientModule in app.module.ts

Import the HttpClientModule package the application module. It is required to consume the Http APIs.

Import HttpClientModule in App.Module.Ts file
Import HttpClientModule in App.Module.ts file

Consume API

The next step is to create a method getData in app.service.ts file to fetch the API results. I am using JSON PlaceHolder Fake API.

Create Infinite Scroll Logic

Create logics to scroll items infinitely. For this purpose I have used following RxJS Observables / Operators:

  • BehaviorSubject– to store the fetched items
  • forkJoin– to call multiple observables simultaneously
  • fromEvent– to generate scroll event on div
  • map– to get only scrollTop data
  • take– to take the last items from existing fetched data

Here is the complete code.

Code Explanation:

Above code will get you the first 10 items to bind data on page load.

Above code block catches the scroll event on div.

Above code block checks whether you have scrolled through the end of items. If yes, do whatever code you want to do in the if block.

This code block will increase the current page records and fetch the next page data. Once the data is received, merged the received data with existing array and provide to BehaviorSubject observable. That will refresh the bind data on page and show you the new data (while keeping the existing data in list).

Do Some Styling

Add some css to restrict height of the div and display scroll bar.


Template Code

Add following html to your app.component.html file.


Its time to run the app and check output. Check the browser. You should see the infinite scroll in your div.

Server Side Infinite Scroll in Angular using RxJS
Server Side Infinite Scroll in Angular using RxJS


You can download the complete source code from Github link.

In this article we covered how to implement a server side infinite scroll in Angular using RxJS Operators.

Must Read Articles on Angular:

Leave a Reply

Your email address will not be published. Required fields are marked *