Angular Material

API reference for Angular Material autocomplete

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

Directives

`MatAutocomplete`

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

`MatAutocompleteOrigin`

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.

`MatAutocompleteTrigger`

Selector: input[matAutocomplete] textarea[matAutocomplete]

Exported as: matAutocompleteTrigger

Properties

Name	Description
@Input('matAutocomplete') `autocomplete: _MatAutocompleteBase`	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: _MatAutocompleteOriginBase`	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: _MatOptionBase \| 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.

Classes

`MatAutocompleteSelectedEvent`

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

Properties

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

Interfaces

`MatAutocompleteActivatedEvent`

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

Properties

Name	Description
`option: _MatOptionBase \| null`	Option that was selected.
`source: _MatAutocompleteBase`	Reference to the autocomplete panel that emitted the event.

`MatAutocompleteDefaultOptions`

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`	Wheter 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.

Constants

`MAT_AUTOCOMPLETE_DEFAULT_OPTIONS`

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

const MAT_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<MatAutocompleteDefaultOptions>;

`MAT_AUTOCOMPLETE_SCROLL_STRATEGY`

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';

Classes

`MatAutocompleteHarness`

Harness for interacting with an MDC-based mat-autocomplete in tests.

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.
`Promise<void>`	Promise that resolves when the action completes.

async

blur

Blurs the autocomplete input.

Returns

Promise<void>

Promise that resolves when the action completes.

async clear
Clears the input value.
`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.
`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<OptionGroupFilters, "ancestor">`
Returns
`Promise<OptionGroup[]>`

async getOptions
Gets the options inside the autocomplete panel.
Parameters
filters? `Omit<OptionFilters, "ancestor">`
Returns
`Promise<Option[]>`

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 `OptionFilters`
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.

Interfaces

`AutocompleteHarnessFilters`

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.

Autocomplete

Testing

API reference for Angular Material autocomplete

link Directives

link MatAutocomplete

Properties

link MatAutocompleteOrigin

Properties

link MatAutocompleteTrigger

Properties

Methods

link Classes

link MatAutocompleteSelectedEvent

Properties

link Interfaces

link MatAutocompleteActivatedEvent

Properties

link MatAutocompleteDefaultOptions

Properties

link Constants

link MAT_AUTOCOMPLETE_DEFAULT_OPTIONS

link MAT_AUTOCOMPLETE_SCROLL_STRATEGY

API reference for Angular Material autocomplete-testing

link Classes

link MatAutocompleteHarness

Properties

Methods

link Interfaces

link AutocompleteHarnessFilters

Properties

Directives

`MatAutocomplete`

`MatAutocompleteOrigin`

`MatAutocompleteTrigger`

Classes

`MatAutocompleteSelectedEvent`

Interfaces

`MatAutocompleteActivatedEvent`

`MatAutocompleteDefaultOptions`

Constants

`MAT_AUTOCOMPLETE_DEFAULT_OPTIONS`

`MAT_AUTOCOMPLETE_SCROLL_STRATEGY`

Classes

`MatAutocompleteHarness`

Interfaces

`AutocompleteHarnessFilters`