Angular infinite scroll

When you are working on a page with a lot of content to show, such as a list of news or a list of books or posts, you probably don't want to load all your content at the same time. Thus, you may want to load the content by sections. However, a pagination system could be great here.

However, pagination is a complex feature to implement in the backend and frontend, and having a page selector adds more work for the user when they are trying to navigate through the content.

On the other hand, we could implement something called infinite scroll. This feature, allow the user to go through your page loading the content when is scrolling down. Facebook, Twitter & Instagram use infinite scroll in order to show the content in the application.

Now, let's implement this feature in Angular.

The base code

The application is very simple; we only have a list of cards displaying a sequence of numbers:

1export class AppComponent implements OnInit {
2  title = 'Infinite scroll';
3
4  content: number[] = [];
5
6  ngOnInit(): void {
7    this.loadContent();
8  }
9
10  loadContent(): void {
11    Array.from({length: 10}).forEach(() => {
12      this.content.push(this.content.length + 1);
13    });
14  }
15}
16

1<div class="container">
2  <div class="card" *ngFor="let number of content">
3    {{number}}
4  </div>
5</div>
6

So far, it finished at number 10. However, the idea is to load new content when the user scrolls down.

Let's do it.

The HostListener

Firstly, let's add a decorator @HostListener function in the app.component.ts file in order to listen to a DOM event, the window:scroll event. Then, inside of the function, let's print the following values:

1@HostListener('window:scroll')
2onWindowsScroll() {
3  console.log(window.innerHeight);
4  console.log(window.scrollY);
5  console.log(document.body.scrollHeight);
6}
7

We have access to the values because they are part of the global object of JavaScript, which is called window in the browser.

And we got:

The calculation

As you can see, the last 3 values are: innerHeight: 696, scrollY: 370 & scrollHeight: 1050. Then, if we sum innerHeight and scrollY we get: 1060 when the scroll is at the bottom of the page.

With these numbers, we could know that if innerHeight + scrollY > scrollHeight we need to request more data. So let's add this condition.

1import { Component, HostListener, OnInit } from '@angular/core';
2...
3@HostListener('window:scroll')
4onWindowsScroll() {
5  if(window.innerHeight + window.scrollY >= document.body.scrollHeight){
6    console.log('Send request');
7    this.loadContent();
8  }
9}
10

Let us demonstrate: 

You can notice that the scroll resizes due to the change in the scrollHeight because we are loading more content to the page.

Summary

We just implemented an infinite scroll using just a decorator from @angular/core. This feature is a good alternative to the old pagination approach.

Give it a shot.

You can see the full code in this repository.