ngx-infinite-scroll

What is ngx-infinite-scroll?

The ngx-infinite-scroll package is an Angular directive that allows you to implement infinite scrolling in your Angular applications. It provides a simple way to load more data as the user scrolls down the page, enhancing the user experience by avoiding the need for pagination.

What are ngx-infinite-scroll's main functionalities?

Basic Infinite Scroll

This feature allows you to implement basic infinite scrolling. The `infiniteScroll` directive is added to a container, and the `scrolled` and `scrolledUp` events are used to load more data when the user scrolls down or up, respectively.

<template>
  <div infiniteScroll
       [infiniteScrollDistance]="2"
       [infiniteScrollUpDistance]="1.5"
       [infiniteScrollThrottle]="300"
       (scrolled)="onScrollDown()"
       (scrolledUp)="onScrollUp()">
    <!-- content here -->
  </div>
</template>

<script>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onScrollDown() {
    console.log('scrolled down!!');
    // Load more data here
  }

  onScrollUp() {
    console.log('scrolled up!!');
    // Load more data here
  }
}
</script>

Custom Scroll Distance

This feature allows you to customize the scroll distance at which the `scrolled` event is triggered. In this example, the `infiniteScrollDistance` is set to 1, meaning the event will be triggered when the user scrolls to the bottom of the container.

<template>
  <div infiniteScroll
       [infiniteScrollDistance]="1"
       (scrolled)="onScroll()">
    <!-- content here -->
  </div>
</template>

<script>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onScroll() {
    console.log('scrolled!!');
    // Load more data here
  }
}
</script>

Throttle Scroll Events

This feature allows you to throttle the scroll events to improve performance. The `infiniteScrollThrottle` input is used to specify the delay in milliseconds between successive scroll events. In this example, the scroll events are throttled to 200 milliseconds.

<template>
  <div infiniteScroll
       [infiniteScrollThrottle]="200"
       (scrolled)="onScroll()">
    <!-- content here -->
  </div>
</template>

<script>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  onScroll() {
    console.log('scrolled!!');
    // Load more data here
  }
}
</script>

Other packages similar to ngx-infinite-scroll

ngx-scroll-event

The ngx-scroll-event package provides a simple way to handle scroll events in Angular applications. It allows you to detect when the user scrolls to the top, bottom, or a specific position of a container. Compared to ngx-infinite-scroll, ngx-scroll-event offers more granular control over scroll events but does not provide built-in infinite scrolling functionality.

ngx-virtual-scroller

The ngx-virtual-scroller package is an Angular component that provides virtual scrolling for large lists. It renders only the visible items in the list, improving performance for large datasets. While ngx-virtual-scroller focuses on optimizing rendering performance, ngx-infinite-scroll is more about loading additional data as the user scrolls.

angular2-infinite-scroll

The angular2-infinite-scroll package is another Angular directive for implementing infinite scrolling. It offers similar functionality to ngx-infinite-scroll, allowing you to load more data as the user scrolls. However, ngx-infinite-scroll is more actively maintained and has better documentation.

README

Angular Infinite Scroll

Inspired by ng-infinite-scroll directive for angular (> 2, 4).

Angular Support

Supports Angular > 4
For Angular version <= 2.3.1, you can use npm i angular2-infinite-scroll (latest version is 0.3.42) - please notice the angular2-infinite-scroll package is deprecated

Angular Consulting Services

I'm a Senior Javascript Engineer & A Front End Consultant at Orizens. My services include:

• consulting to companies and startups on how to approach code in their projects and keep it maintainable.
• I provide project bootstrapping and development - while afterwards, I integrate it on site and guide the team on it.

Contact Me Here

Installation

npm install ngx-infinite-scroll --save

Supported API

Currently supported attributes:

• infiniteScrollDistance<number> - (optional, default: 2) - should get a number, the number of viewport lengths from the bottom of the page at which the event will be triggered.
• infiniteScrollUpDistance<number> - (optional, default: 1.5) - should get a number
• infiniteScrollThrottle<number> - (optional, default: 300) - should get a number of milliseconds for throttle. The event will be triggered this many milliseconds after the user stops scrolling.
• infiniteScrollContainer<string|HTMLElement> - (optional, default: null) - should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty.
• scrolled<function> - this will callback if the distance threshold has been reached on a scroll down.
• scrolledUp<function> - (event: InfiniteScrollEvent) - this will callback if the distance threshold has been reached on a scroll up.
• scrollWindow<boolean> - (optional, default: true) - listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll.
• immediateCheck<boolean> - (optional, default: false) - invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled).
• infiniteScrollDisabled<boolean> - (optional, default: false) - doesn't invoke the handler if set to true

Behavior

By default, the directive listens to the window scroll event and invoked the callback.
To trigger the callback when the actual element is scrolled, these settings should be configured:

• [scrollWindow]="false"
• set an explict css "height" value to the element

DEMO

• Default Scroll By Window - plunkr
• Scroll On a "Modal" - plunkr

Usage

First, import the InfiniteScrollModule to your module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app';

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

platformBrowserDynamic().bootstrapModule(AppModule);

In this example, the onScroll callback will be invoked when the window is scrolled down:

import { Component } from '@angular/core';

@Component({
	selector: 'app',
	template: `
		<div class="search-results"
		    infiniteScroll
		    [infiniteScrollDistance]="2"
		    [infiniteScrollThrottle]="300"
		    (scrolled)="onScroll()">
		</div>
	`
})
export class AppComponent {
	onScroll () {
	    console.log('scrolled!!')
	}
}

in this example, whenever the "search-results" is scrolled, the callback will be invoked:

import { Component } from '@angular/core';

@Component({
	selector: 'app',
	styles: [
		`.search-results {
			height: 20rem;
			overflow: scroll;
		}`
	],
	template: `
		<div class="search-results"
		    infiniteScroll
		    [infiniteScrollDistance]="2"
		    [infiniteScrollThrottle]="500"
		    (scrolled)="onScroll()"
		    [scrollWindow]="false">
		</div>
	`
})
export class AppComponent {
	onScroll () {
	    console.log('scrolled!!')
	}
}

In this example, the onScrollDown callback will be invoked when the window is scrolled down and the onScrollUp callback will be invoked when the window is scrolled up:

import { Component } from '@angular/core';
import { InfiniteScroll } from 'ngx-infinite-scroll';

@Component({
	selector: 'app',
	directives: [ InfiniteScroll ],
	template: `
		<div class="search-results"
		    infiniteScroll
		    [infiniteScrollDistance]="2"
		    [infiniteScrollUpDistance]="1.5"
		    [infiniteScrollThrottle]="500"
		    (scrolled)="onScrollDown()"
		    (scrolledUp)="onScrollUp()">
		</div>
	`
})
export class AppComponent {
	onScrollDown () {
	    console.log('scrolled down!!')
	}

	onScrollUp () {
    	console.log('scrolled up!!')
    }
}

Showcase Examples

• Echoes Player - Developed with Angular, angular-cli and ngrx (github repo for echoes player)