Angular infinite scroll (ngx-infinite-scroll)

Angular infinite scroll (ngx-infinite-scroll)


Published at - Aug 13, 2021

This packages is used to call method on scrolling of page.

  1. Installation
npm install ngx-infinite-scroll --save

2. 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);

3. Changes required in your component

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!!');
  }
}

DEMO

Examples

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!!');
  }
}

Orginaly published at – https://www.npmjs.com/package/ngx-infinite-scroll



About author

Harendra
Harendra Kanojiya

Hi I'm Harendra Kumar Kanojiya. Currently I am FSD (Full-stack developer) and I have expertise with Angular ,PHP, Node JS, Laravel, Codeigniter and front end. Done few live projects and portfolio work in above.



Related Posts -

How to set dynamic page-title meta tags in angular 2/4/5/6/7/8/9/10/11
How to set dynamic page-tit ...

In this tutorial we are going to learn how to implement dynamig page meta ...



Angular slider, price range selector (ngx-slider)
Angular slider, price range ...

Table of Contents ngx-sliderDemosDependenciesInstallationSample usageDoc...



How to use/install Materialize Css with angular 2+
How to use/install Material ...

To use Materialize CSS with angular we need to use the ngx-materialize lib...



Angular Login and Registration page
Angular Login and Registrat ...

Hello, I am going to implement login and registration page design with ang...



Angular 2 Toast component (Angular 2 Toasty)
Angular 2 Toast component ( ...

Angular2 Toasty component shows growl-style alerts and messages for your ap...



Follow Us

Follow us on facebook Click Here

Facebook QR
Scan from mobile
Join our telegram channel Click Here
Telegram QR
Scan from mobile