A lightweight, high‑performance infinite scrolling directive for Angular applications, designed to work smoothly with modern Angular versions and SSR setups.

• 🚀 Simple directive‑based API
• ⚡ High‑performance scroll detection
• 🧩 Works with standalone components
• 🌐 Compatible with Angular 17+
• 📦 Zero external dependencies

Install the package using npm:

npm install angular-infinity-scroller

Import AngularInfinityScrollerDirective into your component and add it to imports.

import { Component } from '@angular/core';
import { AngularInfinityScrollerDirective } from 'angular-infinity-scroller';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [AngularInfinityScrollerDirective],
  templateUrl: './example.component.html',
  styleUrl: './example.component.scss',
})
export class ExampleComponent {
  handleScroll() {
    // load more data here
  }
}

Apply the directive to a scrollable container.

<div
  class="scrollable-parent"
  angularInfinityScroller
  [scrollDistance]="2"
  (onScrolled)="handleScroll()"
>
</div>

• Type: number
• Range: 1 – 9
• Default: 2

Defines when the scroll event should trigger.

Example:

• [scrollDistance]="2" → emits when remaining scroll height is ≤ 20%

If an invalid value is provided, the directive automatically falls back to the default value.

• Type: () => void

Emits when the scroll threshold is reached.

(onScrolled)="handleScroll()"

• ✅ Angular 17 and above
• ✅ Standalone components
• ✅ SSR‑friendly

Suggestions, improvements, and pull requests are welcome.

If you encounter any issues, please raise them on GitHub: 👉 https://github.com/Jayant061/angular-infinity-scroller/issues

If this package helps you, please consider starring the repository ⭐

Happy coding! 🚀