Angular Infinite Scroller

npm install ngx-inf-for intersection-observer

import { InfiniteForModule } from 'ngx-inf-for';
import 'intersection-observer';

@NgModule({
  imports: [ InfiniteForModule ]
})

Since this lib makes heavy use of IntersectionObserver you will need to import the pollyfill for reasonable browser support

<ng-template (infFor)="loadMore()" [infForOf]="items" let-item [infForTrackBy]="trackById">
  <div>{{item | json}}</div>
<ng-template>

Since Angular does not support @Output binding in structual directives sugar syntax we have to use it the more verbose syntax

Please note that you must have an HTML element inside your <ng-template> tags. The bellow example will NOT work

<ng-template (infFor)="loadMore()" [infForOf]="items" let-item>
  {{item | json}}
<ng-template>

Demo

Basic: https://plnkr.co/edit/uUytxT3oAJmxEcd2IKLi?p=preview
Full: https://plnkr.co/edit/5fEYa1R35FSpO3IWHxyE?p=preview