Have ideas to improve npm?Join in the discussion! »

    @jb7/ngx-virtualscroll
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.3 • Public • Published

    @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

    Install

    npm i @jb7/ngx-virtualscroll

    DownloadsWeekly Downloads

    0

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    126 kB

    Total Files

    23

    Last publish

    Collaborators

    • avatar