Select

API for select

API reference for Angular Material select

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

Allows the user to customize the trigger that is displayed when the select has a value.

Selector: mat-select-trigger

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()

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.

autofilled: boolean

Whether the input is currently in an autofilled state. If property is not present on the control it is assumed to be false.

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.

empty: boolean

Whether the select has a value.

errorState: boolean

Whether the control is in an error state.

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.

overlayDir: CdkConnectedOverlay

Overlay pane containing the 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: Observable<void>

Stream that emits whenever the state of the control changes such that the parent MatFormField needs to run change detection.

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.
open

Opens the overlay panel.
toggle

Toggles the overlay panel open or closed.
updateErrorState

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.

The max height of the select's overlay panel

const SELECT_PANEL_MAX_HEIGHT: 256;

The panel's padding on the x-axis

const SELECT_PANEL_PADDING_X: 16;

The panel's x axis padding if it is indented (e.g. there is an option group).

const SELECT_PANEL_INDENT_PADDING_X: number;

The height of the select items in em units.

const SELECT_ITEM_HEIGHT_EM: 3;

Distance between the panel edge and the option text in multi-selection mode.

Calculated as: (SELECT_PANEL_PADDING_X * 1.5) + 20 = 44 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;

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;

Injection token that determines the scroll handling while a select is open.

const MAT_SELECT_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;