@jb7/ngx-virtualscroll

A lightWeight Angular2+ Virtual Scroll component which reduces the load on DOM by dispalying only the items which are visible in the viewport and loads them dynamically on scroll

Installation

To install this library, run:

$ npm install @jb7/ngx-virtualscroll --save

Consuming the library

Once you have installed this library, you need to import it in app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import
import { NgxVirtualScrollModule } from '@jb7/ngx-virtualscroll';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Specify library as an import
   NgxVirtualScrollModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

in your html file

  <ngx-virtualscroll [templateId]="mywish1" [rows]="rows" [itemHeight]=40 [styled]=true [width]=200 [height]=400></ngx-virtualscroll>
 
 <ng-template #mywish1 let-linkObj="linkObj">
{{linkObj.title}}
</ng-template>

and in your .ts file,

rows = []; 
// assign data to this array. 
// For the above template used, make sure that each object of your array contains title, desc, link1 properties
linkObj = {}; // leave it as empty object

Demo

Demo for this grid is available at ngxvirtualscroll.firebaseapp.com

License

MIT © Jeelani Basha Shaik