Quick Fix: 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';
The Solutions:
Solution 1: 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, set your public property selected to the default:
selected = 'domain';
Solution 2: Using Reactive Forms
1) Get the desired object from your array or object literal and assign it to a variable.
2) Set the default value for the form builder object (the <mat-select>) using the setValue() method.
3) Bind the desired value property in your template.
Solution 4:
Ensure that the data types of the `[(value)]` attribute and the `[value]` attribute of the `mat-options` match. For example, if the `[(value)]` attribute is bound to a property of type `number`, the `[value]` attribute of the `mat-options` should also be of type `number.
