Virtual Scroll

import { Component } from '@angular/core';
import { WrVirtualScroll } from 'ngwr/virtual-scroll';

@Component({ imports: [WrVirtualScroll] })
export class MyComponent {}

<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

10000

Row Height (px)

32 px

Viewport (px)

320 px

Name	Description	Type	Default
`items`required	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: a number in px, or any CSS length.	`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()`	Re-measure the viewport after a size change the window does not see, such as a split pane or a parent that was hidden.	`() => void`	`—`

Variable	Default	Declared on
`--wr-virtual-scroll-thumb-radius`	`var(--wr-border-radius-pill)`	`.wr-virtual-scroll`

Angular CDK	`scrolling`

Installation

Playground

Customize

API

CSS variables

Dependencies

See also