Autocomplete

API for autocomplete

API reference for Angular Material autocomplete

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

Selector: mat-autocomplete

Exported as: matAutocomplete
Properties
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
Properties
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.
Methods
closePanel

Closes the autocomplete suggestion panel.
openPanel

Opens the autocomplete suggestion panel.
updatePosition

Updates the position of the autocomplete suggestion panel to ensure that it fits all options within the viewport.

Directive applied to an element to make it usable as a connection point for an autocomplete panel.

Selector: [matAutocompleteOrigin]

Exported as: matAutocompleteOrigin
Properties
Name Description

elementRef: ElementRef<HTMLElement>

Reference to the element on which the directive is applied.

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

Properties
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.

Properties
Name Description

autoActiveFirstOption: boolean

Whether the first option should be highlighted when an autocomplete panel is opened.

Injection token to be used to override the default options for mat-autocomplete.

const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;

The height of each autocomplete option.

const AUTOCOMPLETE_OPTION_HEIGHT: 48;

The total height of the autocomplete panel.

const AUTOCOMPLETE_PANEL_HEIGHT: 256;

Injection token that determines the scroll handling while the autocomplete panel is open.

const MAT_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;