API reference for Angular Material select
import {MatSelectModule} from '@angular/material/select';
Directives
MatSelect
Selector: mat-select
Exported as: matSelectProperties
Name | Description |
---|---|
@Input('aria-label')
|
Aria label of the select. |
@Input('aria-labelledby')
|
Input that can be used to specify the |
@Input({ transform: booleanAttribute })
|
By default selecting an option with a |
@Input()
|
Function to compare the option values with the selected values. The first argument is a value from an option. The second is a value from the selection. A boolean should be returned. |
@Input({ transform: booleanAttribute })
|
Whether to center the active option over the trigger. |
@Input({ transform: booleanAttribute })
|
Whether ripples in the select are disabled. |
@Input({ transform: booleanAttribute })
|
Whether the select is disabled. |
@Input()
|
Object used to control when error messages are shown. |
@Input({ transform: booleanAttribute })
|
Whether checkmark indicator for single-selection options is hidden. |
@Input()
|
Unique id of the element. |
@Input({ transform: booleanAttribute })
|
Whether the user should be allowed to select multiple options. |
@Input()
|
Classes to be passed to the select panel. Supports the same syntax as |
@Input()
|
Width of the panel. If set to |
@Input()
|
Placeholder to be shown if no value has been selected. |
@Input({ transform: booleanAttribute })
|
Whether the component is required. |
@Input()
|
Function used to sort the values in a select in multiple mode.
Follows the same logic as |
@Input({ transform: numberAttribute })
|
Time to wait in milliseconds after the last keystroke before moving focus to an item. |
@Input()
|
Value of the select control. |
@Output()
|
Event emitted when the select panel has been toggled. |
@Output()
|
Event emitted when the selected value has been changed by the user. |
|
A name for this control that can be used by |
|
User-supplied override of the trigger element. |
|
Whether the select has a value. |
|
Whether the select is in an error state. |
|
Whether the select is focused. |
|
|
|
All of the defined groups of options. |
|
Combined stream of all of the child options' change events. |
|
All of the defined select options. |
|
Panel containing the select options. |
|
Whether or not the overlay panel is open. |
|
The currently selected option. |
|
Trigger that opens the select. |
|
The value displayed in the trigger. |
Methods
close | |
---|---|
Closes the overlay panel and focuses the host element. |
focus | |
---|---|
Focuses the select element. |
|
Parameters | |
options? FocusOptions
|
|
open | |
---|---|
Opens the overlay panel. |
toggle | |
---|---|
Toggles the overlay panel open or closed. |
updateErrorState | |
---|---|
Refreshes the error state of the select. |
MatSelectTrigger
Allows the user to customize the trigger that is displayed when the select has a value.
Selector: mat-select-trigger
Classes
MatSelectChange
Change event object that is emitted when the select value has changed.
Properties
Name | Description |
---|---|
|
Reference to the select that emitted the change event. |
|
Current value of the select that emitted the event. |
Interfaces
MatSelectConfig
Object that can be used to configure the default options for the select module.
Properties
Name | Description |
---|---|
|
Whether nullable options can be selected by default.
See |
|
Whether option centering should be disabled. |
|
Whether icon indicators should be hidden for single-selection. |
|
Class or list of classes to be applied to the menu's overlay panel. |
|
Width of the panel. If set to |
|
Time to wait in milliseconds after the last keystroke before moving focus to an item. |
Constants
MAT_SELECT_SCROLL_STRATEGY
Injection token that determines the scroll handling while a select is open.
const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
MAT_SELECT_CONFIG
Injection token that can be used to provide the default options the select module.
const MAT_SELECT_CONFIG: InjectionToken<MatSelectConfig>;
MAT_SELECT_TRIGGER
Injection token that can be used to reference instances of MatSelectTrigger
. It serves as
alternative token to the actual MatSelectTrigger
class which could cause unnecessary
retention of the class and its directive metadata.
const MAT_SELECT_TRIGGER: InjectionToken<MatSelectTrigger>;
API reference for Angular Material select-testing
import {MatSelectHarness} from '@angular/material/select/testing';
Classes
MatSelectHarness
extends
MatFormFieldControlHarness
Harness for interacting with a mat-select in tests.
Properties
Name | Description |
---|---|
|
Methods
async
blur
|
|
---|---|
Blurs the select and returns a void promise that indicates when the action is complete. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
clickOptions
|
|
---|---|
Clicks the options that match the passed-in filter. If the select is in multi-selection mode all options will be clicked, otherwise the harness will pick the first matching option. |
|
Parameters | |
filter? OptionHarnessFilters
|
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
close
|
|
---|---|
Closes the select's panel. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
focus
|
|
---|---|
Focuses the select and returns a void promise that indicates when the action is complete. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
async
getOptionGroups
|
|
---|---|
Gets the groups of options inside the panel. |
|
Parameters | |
filter? Omit<OptgroupHarnessFilters, "ancestor">
|
|
Returns | |
Promise<MatOptgroupHarness[]>
|
|
async
getOptions
|
|
---|---|
Gets the options inside the select panel. |
|
Parameters | |
filter? Omit<OptionHarnessFilters, "ancestor">
|
|
Returns | |
Promise<MatOptionHarness[]>
|
|
async
getValueText
|
|
---|---|
Gets a promise for the select's value text. |
|
Returns | |
Promise<string>
|
|
async
host
|
|
---|---|
Gets a |
|
Returns | |
Promise<TestElement>
|
|
async
isDisabled
|
|
---|---|
Gets a boolean promise indicating if the select is disabled. |
|
Returns | |
Promise<boolean>
|
|
async
isEmpty
|
|
---|---|
Gets a boolean promise indicating if the select is empty (no value is selected). |
|
Returns | |
Promise<boolean>
|
|
async
isFocused
|
|
---|---|
Whether the select is focused. |
|
Returns | |
Promise<boolean>
|
|
async
isMultiple
|
|
---|---|
Gets a boolean promise indicating if the select is in multi-selection mode. |
|
Returns | |
Promise<boolean>
|
|
async
isOpen
|
|
---|---|
Gets whether the select is open. |
|
Returns | |
Promise<boolean>
|
|
async
isRequired
|
|
---|---|
Gets a boolean promise indicating if the select is required. |
|
Returns | |
Promise<boolean>
|
|
async
isValid
|
|
---|---|
Gets a boolean promise indicating if the select is valid. |
|
Returns | |
Promise<boolean>
|
|
async
open
|
|
---|---|
Opens the select's panel. |
|
Returns | |
Promise<void>
|
Promise that resolves when the action completes. |
static
with
|
|
---|---|
Gets a |
|
Parameters | |
options SelectHarnessFilters = {}
|
Options for filtering which select instances are considered a match. |
Returns | |
HarnessPredicate<T>
|
a |
Interfaces
SelectHarnessFilters
A set of criteria that can be used to filter a list of MatSelectHarness
instances.
Properties
Name | Description |
---|---|
|
Only find instances which match the given disabled state. |