Unable to set 'selected' attribute on md-option

[medeirosrich]

Unable to set 'selected' attribute on md-option

Receiving the following error:
Can't bind to 'selected' since it isn't a known property of 'md-option'.

Code sample:

<md-select [placeholder]="'Status'">
     <md-option *ngFor="let statusType of viewModel.StatusTypes" value="{{statusType.Id}}" (onSelect)="statusSelectionChange(statusType)" [selected]="statusType.Id == -10">
				{{statusType.Value}}
     </md-option>
</md-select>

[jelbourn]

@kara are you meant to be able to do this?

[kara]

Not at the moment, no. We don't have any selected binding because it is already possible to select options through existing Angular core form directives. Having two ways to set the selected value would probably conflict with each other. Instead try something like:

<md-select placeholder="Status" [(ngModel)]="selectedStatus">
  <md-option *ngFor="let statusType of viewModel.StatusTypes" value="{{statusType.Id}}">
      {{statusType.Value}}
   </md-option>
</md-select>

[medeirosrich]

Thanks,

I was stuck with this solution initially because I wasn't binding to the value attribute of md-option

i.e. [value]="statusType.Id" vs. value="{{statusType.Id}}"

In case anyone else stumbles upon this thread.

[jackwootton]

@kara Can you explain why this isn't needed? How would one initialize md-option where multiple checked options are permitted?

[ramshinde92]

@kara, Currently there is a case where in we need selected attribute for md-select which is multiple. Can you let me know is there a way to achieve for such a case?

[hnitzsche]

@kara @ramshinde92 same here, also using md-select multiple. And I'm unable to set some options as preselected based on my model.

[abhishekpandeykr]

Any updates on this @kara @ramshinde92 @jelbourn

[hnitzsche]

Please check: #2785
[compareWith] works for me to set preselected values with 'multiple'.

[imchaitanya9]

this ngModel won't work with multiple attribute when you want multiple options to be selected by default. any other workaround?

[irowbin]

@kara I am unable to make selected (checked) options with attribute multiple and also there is no select all toggle option. 👎

Instead, i can do programmatically but looks ugly and messed up;

// lazy map
this.selects.openedChange.subscribe(() => {
     this.selects.options.map(x => {

      mock.findIndex(u => u.id === x.value) > -1 ?  x.select() :  x.deselect();   
   
      return x;

      });
 });

[imchaitanya9]

I've posted my answer for this bug on StackOverflow. Please have a look here.

[iamwhitebox]

+1 desperately need this, shouldn't there be a way to write <mat-option *ngFor="let value of filter.values" [value]="value" [selected]="(filter.value.indexOf(value) > -1) ? 'selected' : 'false'"> or something?

[iamwhitebox]

@kara what if the option doesn't exist in the model? what if values being passed in aren't available in [value]? There has to be a way to default to the first item in the list if the model value doesn't exist.