DdVirtList (Source) is an Angular component for showing a virtual list for both large data arrays and lazy loaded chunks.
Embeds to be rendered items as ng-content
and expects all items to have the same height.
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
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 });
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. |
MIT