patterntypescriptangularCritical

Angular Material: mat-select not selecting default

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

angularmatmaterialselectingnotselectdefault

Problem

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:


    
      
        {{ option.name }}

I have tried setting selected2 and the value in mat-option to both the object and its 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

Solution

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 }}

Code Snippets

value="{{ option.id }}"

[value]="option.id"

<mat-select [(value)]="selected2">

<mat-select [(ngModel)]="selected2">

<div>
  <mat-select [(ngModel)]="selected2">
    <mat-option *ngFor="let option of options2" [value]="option.id">{{ option.name }}</mat-option>
  </mat-select>
</div>

Context

Stack Overflow Q#47333171, score: 202

Revisions (0)

No revisions yet.