infinite scroll in angular

How to Implement Infinite Scroll in Angular-A Practical Developer’s Guide with Real Example

by

Author:

Full Stack Web Developer | Angular | .NET Core | React | SQL Server

Muhammad Talha

A couple of months back, I was developing a client dashboard with thousands of records to show. Pagination was cumbersome and disrupted the user. That is when I came up with the idea of infinite scroll in Angular, a feature that brings in more content as users scroll, much like Instagram, Facebook, or Twitter does. It became a seamless, user-friendly feature that increased usability by leaps and bounds.

In this post, I’ll walk you through how to implement infinite scroll in Angular, using real code and lessons learned from hands-on experience.

Why Infinite Scroll is a Smart Choice

If you’re building modern web apps with long lists or feeds, infinite scroll is almost a necessity. Here are a few real scenarios where I’ve implemented it:

  • News feeds (auto-loading articles)
  • Job boards (scroll to load more listings)
  • Admin dashboards (endless tables of records)
  • Photo galleries
infinite scroll in angular

Users expect this kind of smooth interaction today. It keeps them engaged without having to click “Next Page.”

Step 1: Setting Up Your Angular Project

If you’re starting from scratch:

ng new angular-infinite-scroll-demo
cd angular-infinite-scroll-demo

Then, fire up the dev server:

ng serve

Make sure you’re using Angular 12 or above for compatibility.

Step 2: Installing ngx-infinite-scroll

To simplify scroll detection, I use the ngx-infinite-scroll package:

npm install ngx-infinite-scroll

Then import the module in app.module.ts:

import { InfiniteScrollModule } from 'ngx-infinite-scroll';

@NgModule({
  imports: [BrowserModule, InfiniteScrollModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

Step 3: Creating a Real API Example with JSONPlaceholder

I like to test with JSONPlaceholder before hitting my own backend.

Let’s first create a service to fetch posts:

ng generate service post

// post.service.ts
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class PostService {
  private API_URL = 'https://jsonplaceholder.typicode.com/posts';

  constructor(private http: HttpClient) {}

  getPosts(start: number, limit: number): Observable<any[]> {
    return this.http.get<any[]>(`${this.API_URL}?_start=${start}&_limit=${limit}`);
  }
}

Step 4: Updating Component Logic

Here’s how I load and append posts as users scroll down:

// app.component.ts
import { Component, OnInit } from '@angular/core';
import { PostService } from './post.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  posts: any[] = [];
  start = 0;
  limit = 10;
  loading = false;

  constructor(private postService: PostService) {}

  ngOnInit() {
    this.loadPosts();
  }

  loadPosts() {
    this.loading = true;
    this.postService.getPosts(this.start, this.limit).subscribe((data) => {
      this.posts = [...this.posts, ...data];
      this.start += this.limit;
      this.loading = false;
    });
  }

  onScroll() {
    if (!this.loading) {
      this.loadPosts();
    }
  }
}

Step 5: Template for Infinite Scroll

In your app.component.html:

<div class="post-list" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="300" (scrolled)="onScroll()">
  <div *ngFor="let post of posts" class="post">
    <h3>{{ post.title }}</h3>
    <p>{{ post.body }}</p>
  </div>
  <div *ngIf="loading" class="spinner">Loading more posts...</div>
</div>

Make sure .post-list is scrollable or has a height with overflow: auto.

Backend Pagination (When You’re Not Using Mock APIs)

When working with your actual backend, make sure your API supports pagination. If your endpoints don’t accept limit or page, update them—it’s essential for performance.

Here’s how I usually implement this on the backend (just as a hint):

  • Accept page and size params
  • Use SQL OFFSET and LIMIT
  • Return total records (for frontend logic)

UX & Performance Tips from Real Projects

Add a Spinner

Use a simple *ngIf to show a loading message while fetching.

Use Throttle

Throttling prevents overwhelming scroll events. I set [infiniteScrollThrottle]="300" for smoother behavior.

End-of-Data Handling

Once no more data is received from the API, stop calling it:

if (data.length === 0) {
  this.hasMore = false;
}

Use trackBy in *ngFor

Angular re-renders efficiently when it knows what changed.

trackByPost(index: number, post: any) {
  return post.id;
}

Lazy Load Heavy Elements

Especially when dealing with images or nested components.

Common Mistakes (I’ve Made Some Too)

  • Forgetting to stop API calls when data ends
  • Not checking scroll distance properly
  • Forgetting to debounce or throttle events
  • Letting too many observables pile up without unsubscribing

Use async pipes or takeUntil to avoid memory leaks.

Final Thoughts: Why This Pattern Works So Well

Looking back, implementing infinite scroll in Angular wasn’t difficult once I had the right approach. What made a difference was focusing on UX and making sure I wasn’t hitting the API unnecessarily.

It’s now a go-to pattern in my Angular toolbox, and I recommend giving it a shot if you’re dealing with long lists.

What is infinite scroll in Angular?

It’s a method to automatically load more content as the user scrolls down the page, removing the need for pagination buttons.

What library do I use for infinite scroll in Angular?

ngx-infinite-scroll is a popular choice and integrates easily into Angular apps.

Can I use infinite scroll with my own API?

Yes, just make sure your backend supports pagination through query parameters.

Is infinite scroll good for SEO?

Infinite scroll works well for apps, but for SEO, make sure your app renders important content server-side or has fallbacks.

Can I use infinite scroll with Angular Material?

Absolutely. You can apply infinite scroll to any scrollable container, including those from Angular Material or Bootstrap.

Experience Full Stack Web Developer | Angular | .NET Core | React | SQL Server

Muhammad Talha

Useful Links:

For any query Contact Author: Muhammad Talha

Latest Posts

Leave a Comment