mat-select not pre selecting a value using ngModel

[Lakston]

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 is always showing the placeholder, I've tried using basic primitive values (numbers for the options and ngModel initialised with one of the numbers on page load) and the select is never reflecting the selected option.

What are the steps to reproduce?

mat-select issue

I also added an example with a regular select and option to show that the code is working when not using material, hopefully that helps.

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

material beta 12
angular 4.3.2

Is there anything else we should know?

Please update the plunkr examples with a working version

[willshowell]

Try with the stackblitz from the issue template: https://goo.gl/wwnhMV

[Lakston]

Thanks I hadn't tried the stackblitz, here is the link : mat-select issue

I also added an example with a regular select and option to show that the code is working when not using material, hopefully that helps.

I'll edit my first post to add it there too.

[willshowell]

Ah ok, this is expected behavior. When you bind to value like this, you are actually binding as a string because {{ ... }} is the syntax for string interpolation.

value="{{ number }}"

Your values in numbersArray are of the type number, so by default, it will try to compare '2' === 2 which will return false.

Instead you should bind like this (you can read more about it here),

[value]="number"

That having been said, it is different than the native select, cc @crisbeto.

[Lakston]

I'll admit we just figured it out and I was about to perform my walk of shame :)

Thanks for your help, we'll go with [value]="number"

[JamesWPritchett]

this worked for me
`

<mat-select [ngModel]="sortLevel.SortOrder" (change)="setSortOrder($event)">
    <mat-option [value]="0">{{'ASCENDING' | translate}}</mat-option>
    <mat-option [value]="1">{{'DESCENDING' | translate}}</mat-option>
</mat-select>

`

Also the MatSelectChange.value is expressed as a number, now, too

[rtaft]

<mat-option value=0> is an integer, but it is treated like a string in material2. This causes confusion when a standard select statement treats it as an integer.

[angular-automatic-lock-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.}