Grouped

Groups options under sticky headers via groupBy; the options must be pre-sorted by the same key. A projected *ngGroupHeader template customises the header markup and receives the group name and its option count.

Overview

Examples

Usage

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

html

<autocomplete
  [options]="films"
  [(value)]="value"
  [groupBy]="groupByLetter"
  appearance="outline"
  label="Movie">
  <div *ngGroupHeader="let letter; count as count">{{ letter }} ({{ count }})</div>
</autocomplete>

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.
`groupBy`	`((option: T) => string) \| null`	`null`	Groups options under headers; options must be pre-sorted by key.

Content templates

Directive	MUI equivalent	Purpose
`*ngGroupHeader`	`renderGroup`	Custom group header. Context: $implicit (group name), count.