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

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

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

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

Then, fire up the dev server:

ng serve

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

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 {}

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

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}`);
  }
}

// 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();
    }
  }
}

// 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>

<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;
}

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;
}

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.

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

Muhammad Talha

Useful Links:

• Angular Docs
• RxJS Docs
• ngx-infinite-scroll GitHub

For any query Contact Author: Muhammad Talha

Latest Posts

• How to Implement Infinite Scroll in Angular-A Practical Developer’s Guide with Real Example
• How OAuth 2.0 Works: Complete Guide for Developers with Real-World Examples
• Asp Net Core Authorization: Complete Guide to Secure Your .NET Core APIs
• How to Implement Rate Limiting in .NET Core 8 (with Examples) 
• Exception Logging in ASP.NET Core: Your Guide to Reliable Error Tracking