Angular Material Select

Let's take a look at the material select component which is a form control for selecting a value from a set of options.

As always the first step is to import the module, so in material.module.ts we're gonna import MatSelectModule and add it to the MaterialComponents[] array.

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

MaterialComponents = [
    MatSelectModule
]

Now we can create our first material select component. The material select component just like the input component has to be wrapped inside the mat-form-field component within this component we add the label using the mat-label, the component for MatSelectModule is mat-select every option for the select control is specified using the mat-option component, let's create 3 of them each option will have inner text which the user can see and a value which is sent to the server.

<mat-form-field>
  <mat-label>Topic</mat-label>
  <mat-select>
    <mat-option value="angular">Angular</mat-option>
    <mat-option value="react">React</mat-option>
    <mat-option value="vue">Vue</mat-option>
  </mat-select>
</mat-form-field>

angular material select As you can see in the browser we have basic material select control, the label is shown by default and if you select a value the label goes to the top. We've already seen the features of the form-field component about labels and theming in the previous lecture.

angular material select control - track the value

Track the value of select control can be easily done using the two-way binding, so back in vscode in AppComponent class in app.component.ts file create a new property called selectedValue of type string.

export class AppComponent {
  selectedValue: String;
}

Next in the HTML we two-bind to the property so on <mat-select> we're going to add a banana in a box, value is what bind to. To view the value in the browser let's interpolated using curly brackets at the end.

<mat-form-field>
  <mat-label>Topic</mat-label>
  <mat-select [(value)]="selectedValue">
    <mat-option value="angular">Angular</mat-option>
    <mat-option value="react">React</mat-option>
    <mat-option value="vue">Vue</mat-option>
  </mat-select>
</mat-form-field>
{{ selectedValue }}

Now if you take a look at the browser you don't have a value showed but once you select one of those 3 values the corresponding value will be displayed. mat-form-field

angular material select - clear out the selected value

Sometimes you might want an option to clear out the selected value, in such a scenario use an option with no value attribute, so we're going to add another option without the value attribute.

<mat-form-field>
  <mat-label>Topic</mat-label>
  <mat-select [(value)]="selectedValue">
    <mat-option>None</mat-option>
    <mat-option value="angular">Angular</mat-option>
    <mat-option value="react">React</mat-option>
    <mat-option value="vue">Vue</mat-option>
  </mat-select>
</mat-form-field>

As you can see in the browser once you select None the value is reset.

angular material select - grouping options

To group related options under a particular subheading we make use of mat-optgroup. So back in vscode I'm gonna create a new select with tow subheading Web and Mobile

<mat-form-field>
  <mat-label>Topic</mat-label>
  <mat-select [(value)]="selectedValue">
    <mat-option>None</mat-option>
    <mat-optgroup label="Web">
      <mat-option value="angular">Angular</mat-option>
      <mat-option value="react">React</mat-option>
      <mat-option value="vue">Vue</mat-option>
    </mat-optgroup>
    <mat-optgroup label="Mobile">
      <mat-option value="angular">Ionic</mat-option>
      <mat-option value="react">React Native</mat-option>
      <mat-option value="vue">Flutter</mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

So as you can see each 3 options are grouped under a specific label title. ng select grouping options So that's about grouping together the options.

angular material select - multiple selections

So select multiple options in the select component all you have to do is to add the multiple attribute on the mat-select.

<mat-form-field>
  <mat-label>Topic</mat-label>
  <mat-select [(value)]="selectedValue" multiple>
    <mat-option>None</mat-option>
    <mat-optgroup label="Web">
      <mat-option value="angular">Angular</mat-option>
      <mat-option value="react">React</mat-option>
      <mat-option value="vue">Vue</mat-option>
    </mat-optgroup>
    <mat-optgroup label="Mobile">
      <mat-option value="angular">Ionic</mat-option>
      <mat-option value="react">React Native</mat-option>
      <mat-option value="vue">Flutter</mat-option>
    </mat-optgroup>
  </mat-select>
</mat-form-field>

angular material select multiple selections Now as you can see in the browser the options turned into checkboxes and you can toggle selection on multiple options.

Alright those are some of the properties of angular material select component and the reason I code the options line by line and not using an *ngFor directive is simply because *ngFor is not an angular material concept I want you to understand the possibilities with angular material, but how you want to use it or improve it is completely up to you.