VirtualScroller

New

Explore large collections while rendering only the visible items and a small buffer.

10,000 recordsHorizontalLazy loading

Project collection

Scroll through 10,000 projects or jump directly to a position.

Rendered 0 of 10,000 items · range 1–0 (including buffer)

Horizontal

In horizontal mode, itemSize is the fixed width of each card.

Lazy loading

Simulated requests load the rendered range after 350 ms. Loaded records stay cached.

Usage and API

Import AvVirtualScroller and AvVirtualScrollerItem from avero-ui. Each item has a fixed size in pixels: height for vertical scrolling, width for horizontal scrolling. Variable item sizes and two-dimensional grids are not supported.

HTML

<av-virtual-scroller [items]="projects" [itemSize]="48" scrollHeight="320px">
  <ng-template [avVirtualScrollerItem]="projects" let-project let-index="index">
    <div class="row">{{ index + 1 }}. {{ project?.name }}</div>
  </ng-template>
</av-virtual-scroller>

Viewport. scrollHeight defaults to 320px, scrollWidth to 100%, itemSize to 48 and buffer to 3 items on each side. The viewport follows container resizing. Use a bounded height; percentage heights require a parent with an explicit height.

Templates. Bind [avVirtualScrollerItem] to the items array for typed context: implicit item, index, first, last, even and odd. Add ng-template avVirtualScrollerLoader to replace the default skeleton. Items may be undefined while loading. trackBy accepts the absolute index and item; the default uses the index.

Lazy data. Set lazy and totalRecords, then handle onLazyLoad. It emits first (inclusive) and last (exclusive), including the buffer, initially and when the range changes. Store loaded records at their absolute indices in a new items array. Missing records display placeholders. Data updates alone do not re-request the same range. Manage request cancellation and errors in the parent.

Navigation. scrollToIndex(index) uses a zero-based index and clamps at the end. onScrollIndexChange reports the rendered range. The labelled viewport supports native keyboard scrolling; each item exposes its absolute position to assistive technology. Supply label and emptyMessage for your content.

Theme. Override --av-virtual-scroller-background, --av-virtual-scroller-color, --av-virtual-scroller-border, --av-virtual-scroller-radius, --av-virtual-scroller-accent, --av-virtual-scroller-stripe and --av-virtual-scroller-skeleton.