Get value of md-select from template reference variable, Material for Angular 2

Question

This isn't showing the selected value like it would if it were a textbox instead of a select. What's wrong?

<md-select #mySelect>
    <md-option value="1">one</md-option>
    <md-option value="2">two</md-option>
</md-select>
{{ mySelect.value }}

Answer 1

Try #variable.selected.value like this:

<md-select #mySelect>
    <md-option value="1">one</md-option>
    <md-option value="2">two</md-option>
</md-select>
<div *ngIf="mySelect.selected">
    {{mySelect.selected.value}}
</div>

Answer 2

<form>
    <md-select placeholder="Favorite food" [(ngModel)]="selectedValue" name="food">
    <md-option *ngFor="let food of foods" [value]="food.value">
    {{food.viewValue}}
    </md-option>
    </md-select>enter code here
    <p> Selected value: {{selectedValue}} </p>
</form>

can you try this.

Answer 3

If anyone using Angular Material Selector <mat-select> and looking for a solution to get values inside the template using #var you can get values like this

<mat-select #mySelect>
    <mat-option value="1">one</mat-option>
    <mat-optionvalue="2">two</mat-option>
</mat-select>
<div *ngIf="mySelect.value">
    {{mySelect.value}} // instead of mySelect.selected.value 
</div>

you can use also the same inside mat-select loop