Ngx-virtual-scroll NPM

ngx-virtual-scroll

Why

In 2016 we were developing a ledger at Dinero Regnskab an for that needed to handle multiple lines (more than 10.000).

Installation

To install this library, run:

$ npm install ngx-virtual-scroll --save

Using ngx-virtual-scroll

ngx-virtual-scroll is a directive that you can apply to any element in your Angular application to achieve virtual scroll performance for either window or container scroll.

Container scroll

You start by adding the [ngxVirtualScrollFor] tag on the container element that contains the elements that you want to have virtual scroll on:

<ul 
    class="virtual-scroll"
    [ngxVirtualScrollFor]="collection"
    [containerHeight]="200"
    [getItemHeight]="getItemHeight"
    [getIndexScrollTop]="getIndexScrollTop"
    (containerHeight$)="height = $event"
    (sliced$)="slice = $event"
>
    <div [style.height.px]="height" class="virtual-scroll-container">
        <ng-container *ngFor="let item of slice.collection; let i = index;">
            <li class="virtual-scroll-item" [style.top.px]="slice.offsets[i]">{{slice.index + i}}</li>
        </ng-container>
    </div>
</ul>

Window scroll

You start by adding the [ngxVirtualScrollFor] tag on the container element that contains the elements that you want to have virtual scroll on, then you use some other inputs to tell it to use window as scroll instead of container scroll:

<ul 
    class="virtual-scroll"
    [ngxVirtualScrollFor]="collection"
    [useWindowScroll]="true"
    [getItemHeight]="getItemHeight"
    [getIndexScrollTop]="getIndexScrollTop"
    (containerHeight$)="height = $event"
    (sliced$)="slice = $event"
    [style.height.px]="height"
>
    <ng-container *ngFor="let item of slice.collection; let i = index;">
        <li class="virtual-scroll-item" [style.top.px]="slice.offsets[i]">{{slice.index + i}}</li>
    </ng-container>
</ul>