mat-select not pre selecting a value when mat-option has async content

[Almar]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

When the ngModel of a mat-select is populated on page load the mat-select should have that option selected.

What is the current behavior?

mat-select does not show the current selected option on page load if a mat-option has some async behaviour, in my case the translate pipe:

        <mat-option *ngFor="let option of options" [value]="option.value">
          {{ option.label | translate }}
        </mat-option>

The current selected option is shown the moment the mat-select gets focus.

What are the steps to reproduce?

Please have a look at the following StackBlitz example:
https://stackblitz.com/edit/angular-material2-issue-async-mat-option-label?file=app%2Fpet-select-async%2Fpet-select-async.component.ts

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

material beta 12
angular 4.4.3

[depyronick]

+1

[depyronick]

well #6970 (comment) this

[Almar]

Hey @p0d3r, #6970 seems to be something else entirely. It describes a situation where the options are generated dynamically. The OP was surprised that the selected value was 'lost' when a new set op options was assigned.
This issue concerns strange behaviour if the displayed value of an option is modified by a pipe that has some async logic, like ngx-translate's 'translate' pipe. If the pipe is removed, everything works as expected.

[lordgreg]

I'm having the exact same issue.

[sathyakps]

I am also having the same issue with Reactive forms Module.. Does anybody found the solution?

[crisbeto]

The issue here comes from the fact that the displayed value of the select comes directly from the textContent of the option, however there's no way for the select to know whether that value has changed. It might be tricky to do this in a performant way, because it means that we'd either have to maintain a MutationObserver on each of the options in order to know that the text changed, or we'd have to check the textContent after every change detection cycle.

[lordgreg]

so basically... its an non-standard select html element which has the material design but less features? I'll stick to the default aka. normal select element then. doesn't make any sense not being able to show the default/selected at init.

[crisbeto]

It is possible to have a preselected value, it's currently not possible to have the label change asynchronously after init.

[MichaelScottBurke]

Is it possible to trim the selected value? e.g., i'm choosing a country phone code and want to show the full country name in the menu but only the code after selected? have hunted through several threads with nothing definitive. thanks

[vovikdrg]

For now my workaround is like this
Get labels

this.translateService.get(['Dancers', 'DancerIndexArchive']).safeSubscribe(this, (value) => {
     this.options.push({ key: 'dancers', value: value.Dancers });
     this.options.push({ key: 'dancerIndexArchive', value: value.DancerIndexArchive });
   });

Bind in Template

 <mat-form-field>
      <mat-select formControlName="Type">
        <mat-option [value]="option.key" *ngFor="let option of options">
          {{ option.value }}
        </mat-option>
      </mat-select>
    </mat-form-field>

[jraadt]

A terrible hack to use with dynamically loaded options that may or may not contain the currently selected item, but you want to show the select item info in the select trigger, is to always have the selected item as an option that is hidden.

<mat-option [value]="select.value" *ngIf="select.value" style="display: none">{{select.value}}</mat-option>

Or you could use [compareWith] and have it always return true as long as there is at least 1 option in your select box. Not sure which one is nastier.