Angular select option with selected attribute not working

Question

Using Angular 4, I have a html template and I want a selection box with two options. One of those options should be pre-selected by default.

<select name="rate" #rate="ngModel" ngModel required>
    <option selected value="hr">hr</option>
    <option value="yr">yr</option>
</select>

Details:

I assign #rate="ngModel" so that I can reference the value somewhere else in the template, in a conditional statement or with interpolation {{rate.value}}. For that to work I simply add ngModel to the tag. I'm not binding to anything in the component class as this control is only used to provide it's value to another control in the same template.

Issue:

In Chrome, and Microsoft Edge, the box is empty, no default value selected. If I get rid of #rate="ngModel" ngModel it works. However, I need the reference to rate.value.

I tried various combinations of ngValue, value, [ngValue], [value], but I'm not trying to bind the value to a model and I'm not using a ngFor loop. There is no further styling on the select box either.

Answer 1

When you use ngModel, the state is handled internally and any explicit change applied to the attributes just gets ignored. In your example, you are setting the selected property of option, but you are also providing a (void) ngModel to your select, so Angular expects that the state of the select is provided within the ngModel.

Briefly, you should leverage on your ngModel rather than setting the selected property:

<select 
    name="rate" 
    #rate="ngModel" 
    [(ngModel)]="yourModelName" 
    required
>
    <option value="hr">hr</option>
    <option value="yr">yr</option>
</select>

And:

  yourModelName: string;
  constructor() {
    this.yourModelName = 'hr';
  }

Answer 2

If you don't wish to have a two-way binding, you can set ngModel to the 'default' value and with the template local variable get the selected value:

<select #rate ngModel="hr">
    <option selected value="hr">hr</option>
    <option value="yr">yr</option>
</select>

<p *ngIf="rate.value == 'hr'">hr</p> 
<p *ngIf="rate.value == 'yr'">yr</p>

{{rate.value}}

DEMO