I am using Angular 2 with Angular Material. Looking at the documentation, I am trying to get the select to have a default value as oppose to an empty place holder.
<mat-select [value]="0" >
We can easily do it using setting value to default value
Use [(ngModel)]
:
<mat-select [(ngModel)]="selectedOption">
<mat-option value="1">One</mat-option>
<mat-option value="2">Two</mat-option>
</mat-select>
Component:
selectedOption = '1';
DEMO
Edit #1:
Since Material2.0.0#beta10 (specifically this PR) you can select a value using the value
property of MatSelect
:
<mat-select [value]="selectedOption">
<mat-option value="1">One</mat-option>
<mat-option value="2">Two</mat-option>
</mat-select>
Component:
selectedOption = '1';
Note that you can also use it with two-way data binding -> [(value)].
DEMO
According to documentation you can do by the following way.
Option:1
<md-select value={{ defaultValue }}>
<md-option value="{{ defaultValue }}">{{defaultValue}}</md-option>
<md-option value="1">One</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
Option:2
<md-select value="None">
<md-option value="None">None</md-option>
<md-option value="1">One</md-option>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
</md-select>
It must any value of select dropdown. Else it will not work.