Ngx-infinite-virtual-scroll NPM

ngx-infinite-virtual-scroll

:rocket: Native angular 6+ infinite virtual scroll component

"@angular/cdk-experimental": "^6.0.0",\ "@angular/cdk": "^6.0.0",

Configuration

Main application module

You must import NgxInfiniteVirtualScrollModule inside your main application module (usually named AppModule) to be able to use ngx-infinite-virtual-scroll component and/or directive.

import { NgModule } from '@angular/core';
+ import {NgxInfiniteVirtualScrollModule} from 'ngx-infinite-virtual-scroll';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
+   NgxInfiniteVirtualScrollModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule. { }

Infinite virtual Scroll based on parent container

<div style="height: 500px">
  <ngx-infinite-virtual-scroll [ListData]="increasingSizeData2" (scrollEnd)="loadMore2()">
    <ng-template ivs-item-tmp let-item let-i="index">
      <div style="height: 50px;">
        Item #{{i}} - ({{item}}px)
      </div>
    </ng-template>
  </ngx-infinite-virtual-scroll>
</div>

Infinite virtual Scroll appended to body

<div class="test1">
  <ngx-infinite-virtual-scroll [ListData]="increasingSizeData" [appendToBody]="true" (scrollEnd)="loadMore()">
    <ng-template ivs-item-tmp let-item let-i="index">
      <div style="height: 50px;">
        Item #{{i}} - ({{item}}px)
      </div>
    </ng-template>
  </ngx-infinite-virtual-scroll>
</div>