Virtualized (10,000 options)

Single-select over 10,000 options, rendered efficiently with the CDK virtual scroll. virtualize enables it, itemSize sets the row height, and maxVisibleItems controls how many rows are visible before the list scrolls.

Overview

Examples

Usage

Import AutocompleteComponent and configure it with the inputs below. The full runnable source is on the Examples tab.

html

<autocomplete
  [options]="options"
  [(value)]="value"
  [virtualize]="true"
  [itemSize]="48"
  appearance="fill"
  label="Option" />

API

This example demonstrates the inputs below. See the Autocomplete introduction for the complete API — every input, output, content template and filter helper.

Inputs

Name	Type	Default	Description
`options`	`readonly T[]`	`— (required)`	The list of options shown in the panel.
`virtualize`	`boolean`	`false`	Virtual-scroll the option list (CDK).
`itemSize`	`number`	`40`	Row height (px) used by virtual scroll.
`maxVisibleItems`	`number`	`8`	Max rows visible before the list scrolls.