I have a mat-select where the options are all objects defined in an array. I am trying to set the value to default to one of the options, however it is being left selected when the page renders.
My typescript file contains:
public options2 = [
{"id": 1, "name": "a"},
{"id": 2, "name": "b"}
]
public selected2 = this.options2[1].id;
My HTML file contains:
<div>
<mat-select
[(value)]="selected2">
<mat-option
*ngFor="let option of options2"
value="{{ option.id }}">
{{ option.name }}
</mat-option>
</mat-select>
</div>
I have tried setting selected2
and the value
in mat-option
to both the object and it's id, and have tried using both [(value)]
and [(ngModel)]
in the mat-select
, but none are working.
I am using material version 2.0.0-beta.10
Best Answer
Use a binding for the value in your template.
should be
And in your selected value use
ngModel
instead ofvalue
.should be
Complete code:
On a side note as of version 2.0.0-beta.12 the material select now accepts a
mat-form-field
element as the parent element so it is consistent with the other material input controls. Replace thediv
element withmat-form-field
element after you upgrade.