API reference for Angular Material select

import {MatSelectModule} from '@angular/material/select';

Directives

`MatSelect`

Selector: mat-select

Exported as: matSelect

Properties

Name	Description
@Input('aria-label') `ariaLabel: string`	Aria label of the select.
@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<C>`	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`
`defaultTabIndex: number`	Tabindex to which to fall back to if no value is set.
`empty: boolean`	Whether the select has a value.
`errorState: boolean`	Whether the component is in an error state.
`focused: boolean`	Whether the select is focused.
`ngControl: NgControl`
`optionGroups: QueryList<MatOptgroup>`
`optionSelectionChanges: Observable<MatOptionSelectionChange>`	Combined stream of all of the child options' change events.
`options: QueryList<MatOption>`
`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>`	Emits whenever the component state changes.
`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

toggle
Toggles the overlay panel open or closed.

updateErrorState
Updates the error state based on the provided error state matcher.

`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
`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.
`overlayPanelClass: string \| string[]`	Class or list of classes to be applied to the menu's overlay panel.
`typeaheadDebounceInterval: number`	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>;