API reference for Angular Material select
import {MatSelectModule} from '@angular/material/select';
Directives
MatSelectTrigger
Allows the user to customize the trigger that is displayed when the select has a value.
Selector: mat-select-trigger
MatSelect
Selector: mat-select
Exported as: matSelectProperties
Name | Description |
---|---|
@Input('aria-label')
|
Aria label of the select. If not specified, the placeholder will be used as label. |
@Input('aria-labelledby')
|
Input that can be used to specify the |
@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()
|
Whether to center the active option over the trigger. |
@Input()
|
Whether ripples are disabled. |
@Input()
|
Whether the component is disabled. |
@Input()
|
Object used to control when error messages are shown. |
@Input()
|
Unique id of the element. |
@Input()
|
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()
|
Placeholder to be shown if no value has been selected. |
@Input()
|
Whether the component is required. |
@Input()
|
Function used to sort the values in a select in multiple mode.
Follows the same logic as |
@Input()
|
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. |
|
Tabindex to which to fall back to if no value is set. |
|
Whether the select has a value. |
|
|
|
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 |
---|
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 option centering should be disabled. |
|
Time to wait in milliseconds after the last keystroke before moving focus to an item. |
Constants
SELECT_PANEL_MAX_HEIGHT
The max height of the select's overlay panel
const SELECT_PANEL_MAX_HEIGHT: 256;
SELECT_PANEL_PADDING_X
The panel's padding on the x-axis
const SELECT_PANEL_PADDING_X: 16;
SELECT_PANEL_INDENT_PADDING_X
The panel's x axis padding if it is indented (e.g. there is an option group).
const SELECT_PANEL_INDENT_PADDING_X: number;
SELECT_ITEM_HEIGHT_EM
The height of the select items in em
units.
const SELECT_ITEM_HEIGHT_EM: 3;
SELECT_MULTIPLE_PANEL_PADDING_X
Distance between the panel edge and the option text in multi-selection mode.
Calculated as: (SELECT_PANEL_PADDING_X * 1.5) + 16 = 40 The padding is multiplied by 1.5 because the checkbox's margin is half the padding. The checkbox width is 16px.
const SELECT_MULTIPLE_PANEL_PADDING_X: number;
SELECT_PANEL_VIEWPORT_PADDING
The select panel will only "fit" inside the viewport if it is positioned at this value or more away from the viewport boundary.
const SELECT_PANEL_VIEWPORT_PADDING: 8;
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 standard mat-select in tests.
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 Pick<OptgroupHarnessFilters, "selector" | "labelText"> = {}
|
|
Returns | |
Promise<MatOptgroupHarness[]>
|
|
async
getOptions
|
|
---|---|
Gets the options inside the select panel. |
|
Parameters | |
filter Pick<OptionHarnessFilters, "text" | "isSelected" | "selector"> = {}
|
|
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. |
Interfaces
SelectHarnessFilters
A set of criteria that can be used to filter a list of MatSelectHarness
instances.