Components: 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: https://github.com/angular/material2/issues/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.

[kurtommy]

Just to help: my (crazy / absolutely too long) workaround:
@kara a [selected] is needed IMHO, ngModel with object reference comparison is not working (in my case)

class yourComponent {
 constructor() {
   this.selectComparator = this.selectComparator.bind(this);
 }
selectComparator(id) {
    return +id === this.modelInstance.id;
   }
}

 <mat-select placeholder="Zone" [(ngModel)]="model.id" [compareWith]="selectComparator">
      <mat-option *ngFor="let item of items" value="{{item.id}}">
        {{zone.name}}
      </mat-option>
    </mat-select>

[Pashweetie]

Hello there! I know there were many solutions proposed here and throughout a long, long process of trying to determine how to pre-select your options I came up with a solution that worked for me. My problem was that I couldn't preset values as selected. The way I ended up fixing this was by adding in the mat-select. Once I did this any values in "theSelected" were populated as selected when initialization was ran, as long as the array of options had matching options/values. Therefore filter a list to contain your preselected values and plug it into "theSelected" and this should do the job. I know this answer is pretty similar to another answer so let me know if you have any questions.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}