I'm working on an Angular project that includes a large legacy code base, and just spent a few hours trying to get a mat-select to actually select an item. No matter what I did it seemed like the selected item was always null. In case you're running into something similar, I'm going to show you how I fixed it.

First, I set up an Angular project and installed ng material.

Then, in a component, create a data provider:

view plain print about
1dataSource = [
2 {label: 'one'},
3 {label: 'two'},
4 {label: 'three'},
5 {label: 'four'},
6 {label: 'five'},
7 {label: 'six'},
8 {label: 'seven'},
9 {label: 'eight'},
10 {label: 'nine'},
11 {label: 'ten'}
12 ];

I just created a bunch of generic objects with a label property for the purposes of this sample. Also create a field to hold the selected value:

view plain print about
1selectedItem;

Now, create your mat-select. Start with the mat-form-field:

view plain print about
1<mat-form-field>
2 <!-- more stuff here -->
3</mat-form-field>

Inside that mat-form-field place the

view plain print about
1<mat-select placeholder="Select a Number" [(ngModel)]="selectedItem" >
2 <!-- more stuff here -->
3</mat-select>

This is simple, it uses the ngModel to bind the selected item in the mat-select to the selectedItem property in the component class.

Now add the options:

view plain print about
1<mat-option *ngFor="let item of dataSource" >
2 {{item.label}}
3 </mat-option>

This uses mat-option and loops over the data source to create the items. Run the code and you should see something like this:

Select an item and you'll see the placeholder stays the same:

Whenever I tired to access the selectedItem in code it was always null or blank. What was going on? Did you see my omission yet?

When creating the mat-options, they need a value:

view plain print about
1<mat-option *ngFor="let item of dataSource" [value]="item" >
2 {{item.label}}
3</mat-option>

Without these the mat-select has no idea how to match the selected item to an item in the data provider and the ngModel value will never get set. Once I put in the value everything started working again.

Play with the code here.