Angular Infinite Scroller

npm install ngx-inf-for intersection-observer

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

@NgModule({
  imports: [ ToxicInfiniteScrollerModule ]
})

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}}</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}}
<ng-template>