API for autocomplete

API reference for Angular Material autocomplete

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

Autocomplete component.

Selector: mat-autocomplete

Exported as: matAutocomplete
Properties
Name Description
@Input('aria-label')

ariaLabel: string

Aria label of the autocomplete.

@Input('aria-labelledby')

ariaLabelledby: string

Input that can be used to specify the aria-labelledby attribute.

@Input({ transform: booleanAttribute })

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({ transform: booleanAttribute })

autoSelectActiveOption: boolean

Whether the active option should be selected as the user is navigating.

@Input('class')

classList: string | 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({ transform: booleanAttribute })

disableRipple: boolean

Whether ripples are disabled within the autocomplete panel.

@Input()

displayWith: ((value: any) => string) | null

Function that maps an option's control value to its display value in the trigger.

@Input({ transform: booleanAttribute })

hideSingleSelectionIndicator: boolean

Whether checkmark indicator for single-selection options is hidden.

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

@Input({ transform: booleanAttribute })

requireSelection: boolean

Whether the user is required to make a selection when they're interacting with the autocomplete. If the user moves away from the autocomplete without selecting an option from the list, the value will be reset. If the user opens the panel and closes it without interacting or selecting a value, the initial value will be kept.

@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()

optionActivated: EventEmitter<MatAutocompleteActivatedEvent>

Emits whenever an option is activated.

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

optionGroups: QueryList<MatOptgroup>

Reference to all option groups within the autocomplete.

options: QueryList<MatOption>

Reference to all options within the autocomplete.

panel: ElementRef

Element for the panel containing the autocomplete options.

showPanel: boolean

Whether the autocomplete panel should be visible, depending on option length.

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: inject<ElementRef<HTMLElement>>(ElementRef)

Base class with all of the MatAutocompleteTrigger functionality.

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({ alias: 'matAutocompleteDisabled', transform: booleanAttribute })

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.

@Input('matAutocompletePosition')

position: 'auto' | 'above' | 'below'

Position of the autocomplete panel relative to the trigger element. A position of auto will render the panel underneath the trigger if there is enough space for it to fit in the viewport, otherwise the panel will be shown above it. If the position is set to above or below, the panel will always be shown above or below the trigger. no matter whether it fits completely in the viewport.

activeOption: MatOption | null

The currently active option, coerced to MatOption type.

optionSelections: Observable<MatOptionSelectionChange>

Stream of changes to the selection state of the autocomplete options.

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.

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.

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

Properties
Name Description

option: MatOption | null

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.

autoSelectActiveOption: boolean

Whether the active option should be selected as the user is navigating.

hideSingleSelectionIndicator: boolean

Whether icon indicators should be hidden for single-selection.

overlayPanelClass: string | string[]

Class or list of classes to be applied to the autocomplete's overlay panel.

requireSelection: boolean

Whether the user is required to make a selection when they're interacting with the autocomplete.

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

const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;

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

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

API reference for Angular Material autocomplete-testing

import {MatAutocompleteHarness} from '@angular/material/autocomplete/testing';

Properties
Name Description

static hostSelector: '.mat-mdc-autocomplete-trigger'

The selector for the host element of a MatAutocomplete instance.

Methods
async
blur

Blurs the autocomplete input.

Returns
Promise<void>

Promise that resolves when the action completes.

async
clear

Clears the input value.

Returns
Promise<void>

Promise that resolves when the action completes.

async
enterText

Enters text into the autocomplete.

Parameters

value

string

Returns
Promise<void>

Promise that resolves when the action completes.

async
focus

Focuses the autocomplete input.

Returns
Promise<void>

Promise that resolves when the action completes.

async
getOptionGroups

Gets the option groups inside the autocomplete panel.

Parameters

filters?

Omit<OptgroupHarnessFilters, "ancestor">

Returns
Promise<MatOptgroupHarness[]>

async
getOptions

Gets the options inside the autocomplete panel.

Parameters

filters?

Omit<OptionHarnessFilters, "ancestor">

Returns
Promise<MatOptionHarness[]>

async
getValue

Gets the value of the autocomplete input.

Returns
Promise<string>

async
host

Gets a Promise for the TestElement representing the host element of the component.

Returns
Promise<TestElement>

async
isDisabled

Whether the autocomplete input is disabled.

Returns
Promise<boolean>

async
isFocused

Whether the autocomplete input is focused.

Returns
Promise<boolean>

async
isOpen

Whether the autocomplete is open.

Returns
Promise<boolean>

async
selectOption

Selects the first option matching the given filters.

Parameters

filters

OptionHarnessFilters

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for an autocomplete with specific attributes.

Parameters

options

AutocompleteHarnessFilters = {}

Options for filtering which autocomplete instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatAutocompleteHarness instances.

Properties
Name Description

disabled: boolean

Only find instances which match the given disabled state.

value: string | RegExp

Only find instances whose associated input element matches the given value.

Azure & Blue theme selected.