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>

IgxVirtualScrollComponent

new IgxVirtualScrollComponent(): IgxVirtualScrollComponent

Defined in projects/igniteui-angular/virtual-scroll/src/virtual-scroll/virtual-scroll.component.ts:490

Returns IgxVirtualScrollComponent

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

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

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>

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

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

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;

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

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

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

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>

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

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: number

    The index of the item to scroll to.

  • options: ScrollIntoViewOptions

    block / inline select the alignment (start, center, end or nearest, which scrolls the smallest distance that brings the item into view); behavior selects auto or smooth.

Returns Promise<void>