Angular Material: mat-select not selecting default

Question

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

Answer 1

Use a binding for the value in your template.

value="{{ option.id }}"

should be

[value]="option.id"

And in your selected value use ngModel instead of value.

should be

Complete code:

  
    {{ option.name }}
  

---

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 the div element with mat-form-field element after you upgrade.

  
    {{ option.name }}