Set default option in mat-select

Question

I have a simple select option form field in my Angular material project:

component.html

  <mat-form-field>
    <mat-select [(value)]="modeSelect" placeholder="Mode">
      <mat-option value="domain">Domain</mat-option>
      <mat-option value="exact">Exact</mat-option>
    </mat-select>
  </mat-form-field>

Where [(value)]="modeSelect" is binded to the modeSelect property in the component.ts file

I want to make it so the <mat-option value="domain">Domain</mat-option> is selected by default on page load.

ng-selected did not work for me

Answer 1

Working StackBlitz

No need to use ngModel or Forms

In your html:

 <mat-form-field>
  <mat-select [(value)]="selected" placeholder="Mode">
    <mat-option value="domain">Domain</mat-option>
    <mat-option value="exact">Exact</mat-option>
  </mat-select>
</mat-form-field>

and in your component just set your public property selected to the default:

selected = 'domain';