Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@serrulien/ngx-infinite-scroll

Package Overview
Dependencies
Maintainers
1
Versions
1
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@serrulien/ngx-infinite-scroll

An infinite scroll directive for Angular

  • 10.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
18
decreased by-48.57%
Maintainers
1
Weekly downloads
 
Created
Source

Build Status Backers on Open Collective Sponsors on Open Collective npm version npm version npm downloads a month npm downloads a week

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 - ngx-infinite-scroll@THE_VERSION.0.0
For Angular 4 and Angular = ^5.5.6 - use version ngx-infinite-scroll@0.8.4
For Angular 5.x with rxjs =<5.5.2 - use version ngx-infinite-scroll@0.8.3
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

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

Webpack and Angular

Installation

npm install ngx-infinite-scroll --save

Supported API

Properties

@Input()TypeRequiredDefaultDescription
infiniteScrollDistancenumberoptional2the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 * 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event.
infiniteScrollUpDistancenumberoptional1.5should get a number
infiniteScrollThrottlenumberoptional150should get a number of milliseconds for throttle. The event will be triggered this many milliseconds after the user stops scrolling.
scrollWindowbooleanoptionaltruelistens 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.
immediateCheckbooleanoptionalfalseinvokes 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)
infiniteScrollDisabledbooleanoptionalfalsedoesn't invoke the handler if set to true
horizontalbooleanoptionalfalsesets the scroll to listen for horizontal events
alwaysCallbackbooleanoptionalfalseinstructs the scroller to always trigger events
infiniteScrollContainerstring / HTMLElementoptionalnullshould get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty.
fromRootbooleanoptionalfalseif infiniteScrollContainer is set, this instructs the scroller to query the container selector from the root of the document object.

Events

@Output()TypeEvent TypeRequiredDescription
scrolledEventEmitterIInfiniteScrollEventoptionalthis will callback if the distance threshold has been reached on a scroll down.
scrolledUpEventEmitterIInfiniteScrollEventoptionalthis will callback if the distance threshold has been reached on a scroll up.

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

Contributors

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

Backers

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

Sponsors

Keywords

FAQs

Package last updated on 26 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc