API reference for Angular Material autocomplete
import {MatAutocompleteModule} from '@angular/material/autocomplete';
Directives
MatAutocomplete
Autocomplete component.
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({ transform: booleanAttribute })
|
Whether the first option should be highlighted when the autocomplete panel is opened.
Can be configured globally through the |
@Input({ transform: booleanAttribute })
|
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({ transform: booleanAttribute })
|
Whether ripples are disabled within the autocomplete panel. |
@Input()
|
Function that maps an option's control value to its display value in the trigger. |
@Input({ transform: booleanAttribute })
|
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. |
@Input({ transform: booleanAttribute })
|
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()
|
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 |
---|---|
|
MatAutocompleteTrigger
Base class with all of the MatAutocompleteTrigger
functionality.
Selector: input[matAutocomplete] textarea[matAutocomplete]
Exported as: matAutocompleteTriggerProperties
Name | Description |
---|---|
@Input('matAutocomplete')
|
The autocomplete panel to be attached to this trigger. |
@Input({ alias: 'matAutocompleteDisabled', transform: booleanAttribute })
|
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. |
|
Whether icon indicators should be hidden for single-selection. |
|
Class or list of classes to be applied to the autocomplete's overlay panel. |
|
Whether the user is required to make a selection when they're interacting with the autocomplete. |
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
extends
ComponentHarness
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<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 |
|
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 |
|
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. |