Autocomplete

API reference for Angular Material autocomplete

import {MatAutocompleteModule} from '@angular/material/autocomplete';

Selector: mat-autocomplete

Exported as: matAutocomplete

Name	Description
@Input() `autoActiveFirstOption: boolean`	Whether the first option should be highlighted when the autocomplete panel is opened. Can be configured globally through the `MAT_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
@Input('class') `classList: string`	Takes classes set on the host mat-autocomplete element and applies them to the panel inside the overlay container to allow for easy styling.
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `displayWith: ((value: any) => string) \| null`	Function that maps an option's control value to its display value in the trigger.
@Input() `panelWidth: string \| number`	Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.
@Output() `closed: EventEmitter<void>`	Event that is emitted when the autocomplete panel is closed.
@Output() `opened: EventEmitter<void>`	Event that is emitted when the autocomplete panel is opened.
@Output() `optionSelected: EventEmitter<MatAutocompleteSelectedEvent>`	Event that is emitted whenever an option from the list is selected.
`id: string`	Unique ID to be used by autocomplete trigger's "aria-owns" property.
`isOpen: boolean`	Whether the autocomplete panel is open.
`panel: ElementRef`	Element for the panel containing the autocomplete options.
`showPanel: boolean`	Whether the autocomplete panel should be visible, depending on option length.

Selector: input[matAutocomplete] textarea[matAutocomplete]

Exported as: matAutocompleteTrigger

Name	Description
@Input('matAutocomplete') `autocomplete: MatAutocomplete`	The autocomplete panel to be attached to this trigger.
@Input('matAutocompleteDisabled') `autocompleteDisabled: boolean`	Whether the autocomplete is disabled. When disabled, the element will act as a regular input and the user won't be able to open the panel.
@Input('matAutocompleteConnectedTo') `connectedTo: MatAutocompleteOrigin`	Reference relative to which to position the autocomplete panel. Defaults to the autocomplete trigger element.
`activeOption: MatOption \| null`	The currently active option, coerced to MatOption type.
`optionSelections: Observable<MatOptionSelectionChange>`	Stream of autocomplete option selections.
`panelClosingActions: Observable<MatOptionSelectionChange \| null>`	A stream of actions that should close the autocomplete panel, including when an option is selected, on blur, and when TAB is pressed.
`panelOpen: boolean`	Whether or not the autocomplete panel is open.

closePanel
Closes the autocomplete suggestion panel.

openPanel
Opens the autocomplete suggestion panel.

Event object that is emitted when an autocomplete option is selected.

Name	Description
`option: MatOption`	Option that was selected.
`source: MatAutocomplete`	Reference to the autocomplete panel that emitted the event.

Default mat-autocomplete options that can be overridden.

Name	Description
`autoActiveFirstOption: boolean`	Whether the first option should be highlighted when an autocomplete panel is opened.

Contents