Custom rendering

Overrides the rendered slots with projected templates: *ngOption renders a custom option row with query highlighting, *ngPopupIcon and *ngClearIcon swap the toggle and clear icons, and *ngPaper wraps the listbox in a custom popup surface.

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"
  [getOptionLabel]="getOptionLabel"
  appearance="outline"
  label="Film">
  <div *ngOption="let opt; query as q">…</div>
  <span *ngPopupIcon>▾</span>
  <span *ngClearIcon>×</span>
</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.
`value`	`T \| T[] \| null`	`null`	Two-way selected value (model). An array when multiple.
`getOptionLabel`	`(option: T) => string`	`option.label ?? String(option)`	Maps an option to its display string.

Content templates

Directive	MUI equivalent	Purpose
`*ngOption`	`renderOption`	Custom option row. Context: $implicit (option), option, highlighted, selected, query.
`*ngPaper`	`slots.paper`	Custom popup surface wrapping the listbox. Context: $implicit (listbox template).
`*ngPopupIcon`	`popupIcon`	Custom dropdown toggle icon.
`*ngClearIcon`	`clearIcon`	Custom clear-button icon.