I am trying to use latest angular material. I am stuck at mat-select component.
Here is my html.
<mat-form-field>
<mat-select placeholder="Favorite food" [(value)]="selectedLevel">
<mat-option *ngFor="let food of foods" [value]="food.value">
{{food.viewValue}}
</mat-option>
</mat-select>
</mat-form-field>
Options are populated properly but when i select one option then there is no select value in mat-select element, it is blank. But when i tried to inspect in browser, the required element exists when was hidden in UI
<span class="ng-tns-c4-1 ng-star-inserted">Steak</span>
What might be the missing thing here, anyone can you please help me ?
Best Answer
You need to read the selected value back in the component, do not try to parse the HTML looking for it. You are binding the value using
[(selectedLevel)]
soselectedLevel
in your component has the selected value of that select.See stackblitz
select-overview-example.html
component.ts