ng-infinitescroll

Demo

Installation

npm install --save ng-infinitescroll

Usage

Add InfiniteScrollModule to your list of module imports:

import {InfiniteScrollModule} from 'ng-infinitescroll';

@NgModule({
  imports: [
    ...
    InfiniteScrollModule
],
...
})
export class AppModule { }

Create an array(list) in your component:

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

@Component({
...
templateUrl: './app.component.html',
})
export class AppComponent {
  public list:string[] = [];
  
  loadData():void {
    // .. load more data for 'this.list'
  }
  
}

use the directive in your html templates:

  <div class="scroll-container" (ansynInfiniteScroll)="loadData()">
    <template ngFor [ngForOf]="list" let-item>
      <div class="item">{{item}}</div>
    </template>
  </div>

Outputs

     (ansynInfiniteScroll)="loadData()"

loadData() method will be called when scroll reaches the bottom.

Css

.scroll-container class should most include max-height and overflow:scroll or overflow:auto