Selected options with md-select and Material Design for Angular

Question

How can a default (ie selected) option be set on a Select component when using Material Design for Angular ?

<md-select placeholder="Angular2 Material">
  <md-option>One</md-option>
  <md-option selected>Two</md-option>
  <md-option ng-selected="true">Three</md-option>
</md-select>

Searching SO lead me to:

• Angular Material md select option group default selected values
• md-select can't set selected value

I have tried both ng-selected="true" and selected attribute, neither work.

Plunker: https://plnkr.co/edit/EyC6wpUpgZEihlGclDUU?p=preview

To be clear, I'm not using Material Design for AngularJS Apps . I am using Material Design for Angular .

Answer 1

You should have the variable to store selected value

export class SelectOverviewExample {
  myValue = 'Two';
}

then make sure the md-option has the value attribute. Bind the selected value via ngModel .

<md-select placeholder="Angular2 Material" [(ngModel)]="myValue">
  <md-option>One</md-option>
  <md-option value="Two">Two</md-option>
  <md-option>Three</md-option>
</md-select>