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:
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:
Now, create your mat-select. Start with the mat-form-field:
2 <!-- more stuff here -->
3</mat-form-field>
Inside that mat-form-field place the
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:
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:
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.
posted by Jeffry Houser in
ng material, Professional, Angular
| 0 Comments
