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. |

| Emitter | Info | | - | - | | vlLazyRequest | EventEmitter<{from: number, to: number, items: any[]}> Lazy data request stream. |

| Getter | Info | | - | - | | items | any[] Current items the component provides for rendering. |

License

MIT