Angular Material md-select default selected value

24
votes

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.

I have tried the following two options and both of them does not set a default value

<md-select selected="1">
  <md-option value="1" >One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

<md-select>
  <md-option value="1" selected="true">One</md-option>
  <md-option value="2">Two</md-option>
</md-select>

I looked at all the documentations and the examples, non of them helped

4
angularangular-material2

4 Answers

40
votes

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

7
votes

 <mat-select [value]="0" >

We can easily do it using setting value to default value

0
votes

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.

0
votes
<mat-select formControlName="timezone" required [(ngModel)]="selectedOption">
      <mat-option *ngFor="let item of array" [value]="item.value">{{item.name}}</mat-option>
</mat-select>

for correct working need binding of value [value] or it don't work