Consider Becoming a sponsor

Angular Infinite Scroll

versions now follow Angular's version to easily reflect compatibility.
Meaning, for Angular 10, use ngx-infinite-scroll @ ^10.0.0

Angular - Older Versions Support

Starting Angular 6 and Above - [email protected]_VERSION.0.0
For Angular 4 and Angular = ^5.5.6 - use version [email protected]
For Angular 5.x with rxjs =<5.5.2 - use version [email protected]
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

Used By

• Google
• Apple
• Amazon
• Microsoft
• Disney
• Sap
• Cisco
• Yandex
• Ancestry

and much more.

These analytics are made available via the awesome Scarf package analytics library

Opt-Out Of Scarf

Scarf can be disabled by following these directions

Front End Consulting Services

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

• Angular/React/Javascript Consulting
• Front End Architecture Consulting
• Project Code Review
• Project Development

Contact Here

Installation

npm install ngx-infinite-scroll --save

Supported API

Properties

Events

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

Try the Demo in StackBlitz

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]="50"
      (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]="50"
      (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]="50"
      (scrolled)="onScrollDown()"
      (scrolledUp)="onScrollUp()"
    ></div>
  `,
})
export class AppComponent {
  onScrollDown() {
    console.log('scrolled down!!');
  }

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

In this example, the infiniteScrollContainer attribute is used to point directive to the scrollable container using a css selector. fromRoot is used to determine whether the scroll container has to be searched within the whole document ([fromRoot]="true") or just inside the infiniteScroll directive ([fromRoot]="false", default option).

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

@Component({
  selector: 'app',
  styles: [
    `
      .main-panel {
        height: 100px;
        overflow-y: scroll;
      }
    `,
  ],
  template: `
    <div class="main-panel">
      <div
        infiniteScroll
        [infiniteScrollDistance]="2"
        [infiniteScrollThrottle]="50"
        [infiniteScrollContainer]="selector"
        [fromRoot]="true"
        (scrolled)="onScroll()"
      ></div>
    </div>
  `,
})
export class AppComponent {
  selector: string = '.main-panel';

  onScroll() {
    console.log('scrolled!!');
  }
}

It is also possible to use infiniteScrollContainer without additional variable by using single quotes inside double quotes:

[infiniteScrollContainer]="'.main-panel'"

Showcase Examples

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

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors