vlist v0.1.3

angular-virtual-scroll

Easy to use virtual scroll list for angular. VirtualScroll separate large lists into smaller chunks for a fast rendering.

Demo

Usage

<virtual-scroll [items]="items" (update)="viewPortItems = $event">
  <div *ngFor="let item of viewPortItems" class="item">
    {{ item }}
  </div>
</virtual-scroll>

Get Started

Step 1: Install vlist

$ npm install vlist --save

Step2: Import VListModule

....
import { VListModule } from 'vlist';

@NgModule({
  ....
  imports: [
    ....
    VListModule
  ],
  ....
})
export class AppModule { }

Step 3: Wrap <virtual-scroll>...</virtual-scroll> around the list items

<virtual-scroll [items]="items" (update)="viewPortItems = $event">
  <div *ngFor="let item of viewPortItems" class="item">
    {{ item }}
  </div>
</virtual-scroll>

API

Contributing

Pull requests are welcome!

Development

To generate all *.js, *.d.ts and *.metadata.json files:

$ npm run build

To lint all *.ts files:

$ npm run lint

License

MIT © Alexander Klaiber