components: Unable to set 'selected' attribute on md-option

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>

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Comments: 16 (2 by maintainers)

Most upvoted comments

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

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.

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>

+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?

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>

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