Angular Material

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: matSelect

Properties

Name	Description
@Input('aria-label') `ariaLabel: string`	Aria label of the select. If not specified, the placeholder will be used as label.
@Input('aria-labelledby') `ariaLabelledby: string`	Input that can be used to specify the `aria-labelledby` attribute.
@Input() `compareWith: (o1: any, o2: any) => boolean`	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() `disableOptionCentering: boolean`	Whether to center the active option over the trigger.
@Input() `disableRipple: boolean`	Whether ripples are disabled.
@Input() `disabled: boolean`	Whether the component is disabled.
@Input() `errorStateMatcher: ErrorStateMatcher`	Object used to control when error messages are shown.
@Input() `id: string`	Unique id of the element.
@Input() `multiple: boolean`	Whether the user should be allowed to select multiple options.
@Input() `panelClass: string \| string[] \| Set<string> \| { [key: string]: any; }`	Classes to be passed to the select panel. Supports the same syntax as `ngClass`.
@Input() `placeholder: string`	Placeholder to be shown if no value has been selected.
@Input() `required: boolean`	Whether the component is required.
@Input() `sortComparator: (a: MatOption, b: MatOption, options: MatOption[]) => number`	Function used to sort the values in a select in multiple mode. Follows the same logic as `Array.prototype.sort`.
@Input() `typeaheadDebounceInterval: number`	Time to wait in milliseconds after the last keystroke before moving focus to an item.
@Input() `value: any`	Value of the select control.
@Output() `openedChange: EventEmitter<boolean>`	Event emitted when the select panel has been toggled.
@Output() `selectionChange: EventEmitter<MatSelectChange>`	Event emitted when the selected value has been changed by the user.
`controlType: 'mat-select'`	A name for this control that can be used by `mat-form-field`.
`customTrigger: MatSelectTrigger`	User-supplied override of the trigger element.
`defaultTabIndex: number`	Tabindex to which to fall back to if no value is set.
`empty: boolean`	Whether the select has a value.
`errorState: boolean`
`focused: boolean`	Whether the select is focused.
`ngControl: NgControl`
`optionGroups: QueryList<MatOptgroup>`	All of the defined groups of options.
`optionSelectionChanges: Observable<MatOptionSelectionChange>`	Combined stream of all of the child options' change events.
`options: QueryList<MatOption>`	All of the defined select options.
`panel: ElementRef`	Panel containing the select options.
`panelOpen: boolean`	Whether or not the overlay panel is open.
`selected: MatOption \| MatOption[]`	The currently selected option.
`stateChanges: Subject<void>`
`trigger: ElementRef`	Trigger that opens the select.
`triggerValue: string`	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
`source: MatSelect`	Reference to the select that emitted the change event.
`value: any`	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
`disableOptionCentering: boolean`	Whether option centering should be disabled.
`typeaheadDebounceInterval: number`	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.
`Promise<void>`	Promise that resolves when the action completes.

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

async

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.
`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 `Promise` for the `TestElement` representing the host element of the component.
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.
`Promise<void>`	Promise that resolves when the action completes.

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.

Select

Testing

API reference for Angular Material select

link Directives

link MatSelectTrigger

link MatSelect

Properties

Methods

link Classes

link MatSelectChange

Properties

link Interfaces

link MatSelectConfig

Properties

link Constants

link SELECT_PANEL_MAX_HEIGHT

link SELECT_PANEL_PADDING_X

link SELECT_PANEL_INDENT_PADDING_X

link SELECT_ITEM_HEIGHT_EM

link SELECT_MULTIPLE_PANEL_PADDING_X

link SELECT_PANEL_VIEWPORT_PADDING

link MAT_SELECT_SCROLL_STRATEGY

link MAT_SELECT_CONFIG

link MAT_SELECT_TRIGGER

API reference for Angular Material select-testing

link Classes

link MatSelectHarness extends MatFormFieldControlHarness

Methods

link Interfaces

link SelectHarnessFilters

Directives

`MatSelectTrigger`

`MatSelect`

Classes

`MatSelectChange`

Interfaces

`MatSelectConfig`

Constants

`SELECT_PANEL_MAX_HEIGHT`

`SELECT_PANEL_PADDING_X`

`SELECT_PANEL_INDENT_PADDING_X`

`SELECT_ITEM_HEIGHT_EM`

`SELECT_MULTIPLE_PANEL_PADDING_X`

`SELECT_PANEL_VIEWPORT_PADDING`

`MAT_SELECT_SCROLL_STRATEGY`

`MAT_SELECT_CONFIG`

`MAT_SELECT_TRIGGER`

Classes

`MatSelectHarness` extends MatFormFieldControlHarness

Interfaces

`SelectHarnessFilters`