API reference for Angular Material autocomplete
import {MatAutocompleteModule} from '@angular/material/autocomplete';
Directives
MatAutocomplete
Selector: mat-autocomplete
Exported as: matAutocompleteProperties
Name | Description |
---|---|
@Input('aria-label')
|
Aria label of the autocomplete. |
@Input('aria-labelledby')
|
Input that can be used to specify the |
@Input()
|
Whether the first option should be highlighted when the autocomplete panel is opened.
Can be configured globally through the |
@Input()
|
Whether the active option should be selected as the user is navigating. |
@Input('class')
|
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()
|
Whether ripples are disabled. |
@Input()
|
Function that maps an option's control value to its display value in the trigger. |
@Input()
|
Whether checkmark indicator for single-selection options is hidden. |
@Input()
|
Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host. |
@Output()
|
Event that is emitted when the autocomplete panel is closed. |
@Output()
|
Event that is emitted when the autocomplete panel is opened. |
@Output()
|
Emits whenever an option is activated. |
@Output()
|
Event that is emitted whenever an option from the list is selected. |
|
Unique ID to be used by autocomplete trigger's "aria-owns" property. |
|
Whether the autocomplete panel is open. |
|
Reference to all option groups within the autocomplete. |
|
Reference to all options within the autocomplete. |
|
Element for the panel containing the autocomplete options. |
|
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: matAutocompleteOriginProperties
Name | Description |
---|---|
|
Reference to the element on which the directive is applied. |
MatAutocompleteTrigger
Selector: input[matAutocomplete] textarea[matAutocomplete]
Exported as: matAutocompleteTriggerProperties
Name | Description |
---|---|
@Input('matAutocomplete')
|
The autocomplete panel to be attached to this trigger. |
@Input('matAutocompleteDisabled')
|
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')
|
Reference relative to which to position the autocomplete panel. Defaults to the autocomplete trigger element. |
@Input('matAutocompletePosition')
|
Position of the autocomplete panel relative to the trigger element. A position of |
|
The currently active option, coerced to MatOption type. |
|
Stream of changes to the selection state of the autocomplete options. |
|
A stream of actions that should close the autocomplete panel, including when an option is selected, on blur, and when TAB is pressed. |
|
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 that was selected. |
|
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 that was selected. |
|
Reference to the autocomplete panel that emitted the event. |
MatAutocompleteDefaultOptions
Default mat-autocomplete
options that can be overridden.
Properties
Name | Description |
---|---|
|
Whether the first option should be highlighted when an autocomplete panel is opened. |
|
Whether the active option should be selected as the user is navigating. |
|
Wheter icon indicators should be hidden for single-selection. |
|
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 |
---|---|
|
The selector for the host element of a |
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<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 |
|
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 |
|
Parameters | |
options AutocompleteHarnessFilters = {}
|
Options for filtering which autocomplete instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
AutocompleteHarnessFilters
A set of criteria that can be used to filter a list of MatAutocompleteHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances which match the given disabled state. |
|
Only find instances whose associated input element matches the given value. |