Import
import { WrVirtualScroll } from 'ngwr/virtual-scroll';Playground
<wr-virtual-scroll
[items]="rows"
[itemSize]="32"
[height]="320"
>
<ng-template let-row let-i="index">
<div>{{ i + 1 }}. {{ row.label }}</div>
</ng-template>
</wr-virtual-scroll>Customize
Items
Row Height (px)
Viewport (px)
API
| Name | Description | Type | Default |
|---|---|---|---|
itemsrequired | Items to render. The same array reference triggers no re-layout. | readonly T[] | — |
itemSize | Per-row pixel height. All rows must share this height. | number | 32 |
height | Viewport height — number = px, or any CSS length string. | number | string | 256 |
minBufferPx | Pixels of rendered content kept above + below the viewport. | number | itemSize * 4 |
maxBufferPx | Maximum buffered pixels before recycling rows. | number | itemSize * 8 |
trackBy | trackBy for the inner *cdkVirtualFor. | TrackByFunction<T> | identity |
scrollToIndex(i, behavior?) | Programmatically scroll an index into view. | (i: number, b?: ScrollBehavior) => void | — |
scrollToOffset(px, behavior?) | Scroll to a pixel offset. | (px: number, b?: ScrollBehavior) => void | — |
checkViewportSize() | Force a viewport size recheck (after host resize outside ResizeObserver). | () => void | — |