CODEWITHSUNDEEP
angularangular-material2
Jack
Jack

Reputation: 10613

Selected options with md-select and Material Design for Angular

How can a default (i.e. 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:

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.

Upvotes: 4

Views: 8283

Answers (1)

Roman C
Roman C

Reputation: 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>

Upvotes: 5

Related Questions