A virtual scroll component for large lists. Only the items visible in the viewport (plus a configurable over-scan) are rendered.
- Igx Keywords
- virtual, scroll, virtualization, list
- Igx Group
- Grids & Lists
Example
<igx-virtual-scroll [data]="items" style="height: 400px">
<ng-template igxVirtualItem let-item let-i="index">
<div>{{ i }}: {{ item }}</div>
</ng-template>
</igx-virtual-scroll> Constructors
Section titled "Constructors"IgxVirtualScrollComponent
new IgxVirtualScrollComponent(): IgxVirtualScrollComponent Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:490
Returns IgxVirtualScrollComponent
Properties
Section titled "Properties"The array of items to virtualize.
Compared by reference: mutating the array in place (data.push(...))
causes no update. Assign a new array instead. The dataRequest flow
also expects a new array.
data: InputSignal<T[]> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:222
dataRequest
Section titled "dataRequest"Emitted when the rendered window comes within a few items of the end of
data. Also emitted on the first render, when the loaded items do not
fill the viewport. Listen to this event to append more items
(infinite / remote scrolling).
dataRequest: OutputEmitterRef<VirtualScrollDataRequest> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:332
dataWindow
Section titled "dataWindow"A loaded page of a larger collection, for data that arrives a page at a time.
Takes the place of data while it is set. The list is as long as totalCount, so the
scrollbar spans the whole collection while only the page is in memory. Indices the page
does not cover render nothing; use stateChange to see which range is wanted and supply
the page that covers it.
Measured sizes are kept per index across pages while totalCount holds: the indices still
mean the same records. A page with another totalCount is a different collection, and
every size is measured again. A page that keeps the count but puts different records at
the same indices keeps the sizes measured for the previous ones until those rows render.
dataWindow: InputSignal<VirtualDataWindow<T> | null> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:267
Example
<igx-virtual-scroll [dataWindow]="page" (stateChange)="load($event)" style="height: 400px">
<ng-template igxVirtualItem let-item>{{ item?.name }}</ng-template>
</igx-virtual-scroll> estimatedItemSize
Section titled "estimatedItemSize"Estimated item size in pixels used before an item is measured in the DOM. The engine replaces this with the actual measured size after the first render of each item. Unmeasured items then take the average measured size. Default is 50 pixels. Setting this to a value close to the actual average item size can improve initial rendering performance.
estimatedItemSize: InputSignal<number> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:245
itemTemplate
Section titled "itemTemplate"Item template provided programmatically. Takes precedence over a content
ng-template[igxVirtualItem] when both are provided.
Items are measured by their border box, so margins accumulate as drift down the list. Use padding on the item, or a gap on a wrapper, instead.
Only the current window is in the DOM, so assistive technology cannot
infer an item's position from the markup. Templates that render a role
with set semantics (listitem, option, row, ...) should map the
context's index and count onto aria-posinset and aria-setsize.
Item elements are recycled: bind all item state and write user changes
back to the item, or unbound DOM state (e.g. a toggled checkbox) shows on
another item. See keyFunction.
itemTemplate: InputSignal<TemplateRef<IgxVsItemContext<T>> | null> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:300
keyFunction
Section titled "keyFunction"Returns a unique key from an item and its index in the whole collection. An item keeps its
element while its key stays rendered. Defaults to the index; set it when items move within
data (sort, insert, remove).
keyFunction: InputSignal<VirtualScrollKeyFunction<T> | null> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:317
Example
<igx-virtual-scroll [data]="people" [keyFunction]="byId">...</igx-virtual-scroll>byId = (person: Person) => person.id; orientation
Section titled "orientation"Scroll orientation of the virtual scroll. Can be either "vertical" or "horizontal". Default is "vertical".
orientation: InputSignal<"horizontal" | "vertical"> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:229
overScan
Section titled "overScan"Number of extra items to render beyond the visible area of the viewport. Higher values reduce blank flashes during fast scrolling but may impact performance. Default is 2.
overScan: InputSignal<number> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:236
stateChange
Section titled "stateChange"Emitted when the rendered virtual window changes.
stateChange: OutputEmitterRef<VirtualScrollState> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:324
Accessors
Section titled "Accessors"layoutComplete
Section titled "layoutComplete"Resolves when the virtual scroll has settled: the current render pass is complete, the item-size measurements it triggers are complete, and so are the renders those measurements schedule.
get layoutComplete(): Promise<void> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:575
Returns Promise<void>
Methods
Section titled "Methods"ngOnDestroy
Section titled "ngOnDestroy"A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy(): void Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:564
Returns void
scrollToIndex
Section titled "scrollToIndex"Scrolls to the specified item index.
Items outside the rendered window have only an estimated size, so the first jump can miss the target. The items at the landing point are then measured and the scroll position is corrected, until the offset is stable. The returned promise resolves on that final offset; callers that need only the first, approximate scroll can ignore it, because the first jump is applied before the call returns.
scrollToIndex(index: number, options: ScrollIntoViewOptions): Promise<void> Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:597
Parameters
- index:
numberThe index of the item to scroll to.
- options:
ScrollIntoViewOptionsblock/inlineselect the alignment (start,center,endornearest, which scrolls the smallest distance that brings the item into view);behaviorselectsautoorsmooth.