Angular Select Option With Selected Attribute Not Working

Answer :

When you use ngModel, the state is handled internally and any explicit change to it 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 instead 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';   } 

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