Render large fixed-height lists efficiently with Angular CDK virtual scrolling. Only visible rows (plus a small buffer) stay in the DOM — ideal for inboxes, pickers, and admin tables with thousands of rows. Bind [items] from httpResource in the httpResource cookbook.
Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.
Set an explicit height on base-virtual-scroll (e.g. class="h-96"), pass [items] and [itemSize], and provide a row template with baseVirtualScrollItem.
5,000 users — only visible rows are rendered.
<base-virtual-scroll class="h-96" [items]="users" [itemSize]="56">
<ng-template baseVirtualScrollItem let-user let-index="index">
<div class="flex h-14 items-center px-4">{{ user.name }}</div>
</ng-template>
</base-virtual-scroll>TypeScript
import { Component } from '@angular/core';
// Install: npx base-ui-cli add virtual-scroll
// Paths are relative to aliases.components (default: src/app/components)
import { VirtualScrollItemDirective } from './virtual-scroll/virtual-scroll-item.directive';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
@Component({
selector: 'app-virtual-scroll-example',
imports: [
VirtualScrollComponent,
VirtualScrollItemDirective
],
template: `...`
})
export class VirtualScrollExampleComponent {}Install
npx base-ui-cli add virtual-scroll
itemSize must match the rendered row height in pixels. Mismatch causes jitter or overlap when scrolling.
<base-virtual-scroll [itemSize]="72" [items]="rows" class="h-80">...</base-virtual-scroll>
TypeScript
import { Component } from '@angular/core';
// Install: npx base-ui-cli add virtual-scroll
// Paths are relative to aliases.components (default: src/app/components)
import { VirtualScrollItemDirective } from './virtual-scroll/virtual-scroll-item.directive';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
@Component({
selector: 'app-virtual-scroll-example',
imports: [
VirtualScrollComponent,
VirtualScrollItemDirective
],
template: `...`
})
export class VirtualScrollExampleComponent {}Install
npx base-ui-cli add virtual-scroll
Run the following command to add this component to your project:
npx base-ui-cli add virtual-scroll
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.
npx -y base-ui-ng-mcp
Base UI provides standalone components. Import the exact elements you want to use into your component.
// Install: npx base-ui-cli add virtual-scroll
// Paths are relative to aliases.components (default: src/app/components)
import { VirtualScrollItemDirective } from './virtual-scroll/virtual-scroll-item.directive';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
@Component({
selector: 'app-your-component',
imports: [
VirtualScrollComponent,
VirtualScrollItemDirective
],
template: `...`
})
export class YourComponent {} API for virtual-scroll — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
base-virtual-scroll | class | string | '' | Extra host classes merged via `cn()`. Set an explicit height (e.g. `h-96`) on the host. |
base-virtual-scroll | items | T[] | [] | Full list rendered virtually. |
base-virtual-scroll | itemSize | number | 48 | Fixed row height in pixels — must match the rendered row template height. |
base-virtual-scroll | minBufferPx | number | 200 | Minimum pixels rendered outside the viewport (CDK buffer). |
base-virtual-scroll | maxBufferPx | number | 400 | Maximum pixels rendered outside the viewport (CDK buffer). |
[baseVirtualScrollItem] | — | — | — | Marks an `ng-template` as the row template for . |
Content