API for select

API reference for Angular Material select

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

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({ transform: booleanAttribute })

canSelectNullableOptions: boolean

By default selecting an option with a null or undefined value will reset the select's value. Enable this option if the reset behavior doesn't match your requirements and instead the nullable options should become selected. The value of this input can be controlled app-wide using the MAT_SELECT_CONFIG injection token.

@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({ transform: booleanAttribute })

disableOptionCentering: this._defaultOptions?.disableOptionCentering ?? false

Whether to center the active option over the trigger.

@Input({ transform: booleanAttribute })

disableRipple: boolean

Whether ripples in the select are disabled.

@Input({ transform: booleanAttribute })

disabled: boolean

Whether the select is disabled.

@Input()

errorStateMatcher: ErrorStateMatcher

Object used to control when error messages are shown.

@Input({ transform: booleanAttribute })

hideSingleSelectionIndicator: boolean

Whether checkmark indicator for single-selection options is hidden.

@Input()

id: string

Unique id of the element.

@Input({ transform: booleanAttribute })

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

panelWidth: string | number | null

Width of the panel. If set to auto, the panel will match the trigger width. If set to null or an empty string, the panel will grow to match the longest option's text.

@Input()

placeholder: string

Placeholder to be shown if no value has been selected.

@Input({ transform: booleanAttribute })

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({ transform: numberAttribute })

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.

empty: boolean

Whether the select has a value.

errorState: boolean

Whether the select is in an error state.

focused: boolean

Whether the select is focused.

ngControl: inject(NgControl, { self: true, optional: true })!

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.

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

Refreshes the error state of the select.

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

Selector: mat-select-trigger

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.

Object that can be used to configure the default options for the select module.

Properties
Name Description

canSelectNullableOptions: boolean

Whether nullable options can be selected by default. See MatSelect.canSelectNullableOptions for more information.

disableOptionCentering: boolean

Whether option centering should be disabled.

hideSingleSelectionIndicator: boolean

Whether icon indicators should be hidden for single-selection.

overlayPanelClass: string | string[]

Class or list of classes to be applied to the menu's overlay panel.

panelWidth: string | number | null

Width of the panel. If set to auto, the panel will match the trigger width. If set to null or an empty string, the panel will grow to match the longest option's text.

typeaheadDebounceInterval: number

Time to wait in milliseconds after the last keystroke before moving focus to an item.

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

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

Injection token that can be used to provide the default options the select module.

const MAT_SELECT_CONFIG: InjectionToken<MatSelectConfig>;

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';

Harness for interacting with a mat-select in tests.

Properties
Name Description

static hostSelector: '.mat-mdc-select'

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

Returns
Promise<void>

Promise that resolves when the action completes.

static
with

Gets a HarnessPredicate that can be used to search for a select with specific attributes.

Parameters

options

SelectHarnessFilters = {}

Options for filtering which select instances are considered a match.

Returns
HarnessPredicate<T>

a HarnessPredicate configured with the given options.

A set of criteria that can be used to filter a list of MatSelectHarness instances.

Properties
Name Description

disabled: boolean

Only find instances which match the given disabled state.

Azure & Blue theme selected.