Angular Material Select

<mat-select> is a form control used for selecting a value from a set of options. It is same as the original <select> element. We will discuss more about the selections in Material Design Imagination.

To add selection options, add <mat-select> elements to <mat-select>. Angular content supports the use of <mat-form-field> inside the native <select> element. Add the matNativeControl attribute to the <select> element to use a parent selection inside <mat-form-field>.

app.component.html

app.component.ts

Output:

Getting and setting the select value

The <mat-select> supports 2-way binding to the value property without the need for Angular forms.

app.component.html

app.component.ts

Output:

Both <mat-select> and <select> support Formsmodule (NgModel) and ReactiveFormsModule (FormControl, FormGroup, etc.).

app.component.html

app.component.ts

Output:

Form field Features

There are a number of <mat-form-field> features that are used with both <select> and <mat-select>. It includes error messages, prefixes, hint text and suffixes.

app.component.html

app.component.ts

Output:

To set a static placeholder

The placeholder is shown when the <mat-form-field> label is floating or the <mat-select> label is empty. It is used to give the user an additional indication about the value of their selection. The placeholder specifies by setting the placeholder attribute on the <mat-select> element. In some cases, that <mat-form-field> uses a placeholder as a label.

Disabling the select or individual options

We can disable the entire selection or individual options in a selection by using the Disable property on the <select> or <mat-select> and the <option> or <mat-option> elements.

app.component.html

app.component.ts

Output:

Creating groups of options

The <mat-optgroup> element is used to group common options under a subheading. The group name will set by using the label property of <mat-optgroup>. Like individual <mat-options> elements, the whole <mat-Optgroup> can be disabled or enabled by setting the Disable property.

app.component.html

app.component.ts

Output:

Multiple Selections

The <mat-select> defaults to single-select mode but can be configured to allow different classes by setting other properties. When using <mat-select> in multiple selection mode, its value will be a sorted list of all selected values instead of a single value.

app.component.html

app.component.ts

Output:

Customizing the trigger label

If you have to display a custom trigger label inside a <mat-select>, you can use <mat-select-trigger> element.

Disabling the ripple effect

When the user clicks on <mat-option> then the ripple animation is shown. It could disable by the disableRipple property on <mat-select>.

app.component.html

app.component.ts

Output:

Adding custom styles to the dropdown panel

To styling the dropdown panel, �has a�panel Class property which is used to apply additional CSS classes to the dropdown panel.

app.component.html

app.component.ts

app.component.css

Output:

Changing when error messages are shown

The <mat-form-field> allows us to associate error messages with the <select> or <mat-select>. By default, error messages are came when the control is invalid or the user has interacted with the element. If we want to override the behavior, we can use the errorStateMatcher property <mat-select>. The property takes an instance of the ErrorStateMatcher object

app.component.html

app.component.ts

Output:

A global error condition matching can be specified by setting the ErrorStateMatcher provider. It applies to all inputs. ShowOnDirtyErrorStateMatcher is available to show globally available input errors when the input is invalid.

Keyboard interaction

DOWN_ARROW: It focuses on the next option

UP_ARROW: It focuses on the previous option

ENTER or SPACE: It selects on the focused item

Accessibility

The <mat-select> component has "combobox", the dropdown panel has "listbox" and options inside select panel have "option".

The native <select> offers the best accessibility, and screen-readers support it.

Troubleshooting

Error: Cannot change multiple modes of select after initialization

It occurs if we try to bind different properties on the dynamic value to <mat-select>.

Error: Value is an array in multiple-selection mode

It occurs when we assign a value other than null, undefined, or an array to the <mat-select multiple>.

For example, mySelect.value = 'option1'.