Dd-virt-list NPM

DdVirtList

DdVirtList (Source) is an Angular component for showing a virtual list for both large data arrays and lazy loaded chunks.

Info

Embeds to be rendered items as ng-content and expects all items to have the same height.

HowTo: Simple Data

Template:

<dd-virt-list #elemVlist vlHeight="300px" [vlData]="data">
  <label *ngFor="let ii of elemVlist.items" [style.font-family]="'monospace'">{{ ii }}</label>
</dd-virt-list>

Code:

data = Array.from(Array(1000000), (ii, jj) => jj); // create array of numbers

HowTo: Lazy Loading

Template:

<dd-virt-list #elemVlist vlHeight="300px" [vlCount]="count" [vlLazyStream]="stream" (vlLazyRequest)="onLazy($event)">
  <label *ngFor="let ii of elemVlist.items" [style.font-family]="'monospace'">{{ ii }}</label>
</dd-virt-list>

Code:

stream = new Subject<{from: number, to: number, items: any[]}>();
onLazy = (request: {from: number, to: number}) =>
    // ... get lazy data page into 'data'
    this.stream.next({ ...request, items: data });

API

Setter	Default	Info
vlBatchSize	30	`number` Batch size hint used for page size calculation (min. 10).
vlHeight	'auto'	`string` Height of the scrolling container (expects any valid CSS height).
vlChildrenPerRow	0	`number` If bigger than 0 then the content is expected to be a container of the actual list items (instead of being the list of items otherwise).
vlData	null	`any[]` For non-lazy data representation (auto-sets vlCount).
vlCount	0	`number` Set to total count for lazy data.
vlTrigger	null	`Observable` Can be used to trigger re-requesting data.
vlLazyStream	null	`Observable<{from: number, to: number, items: any[]}>` Used as source of lazy data.
vlDebugMode	false	`boolean` Logs some info when set to `true`.