selected in select option give wrong attribute value

Question

I want to display a select with all the option of my enum and change the value to update my database. To do so: I have an enum:

export enum SubscriptionEnum {
    DAILY= 'DAILY',
    ANNUAL= 'ANNUAL',
    HALF-YEARLY = 'HALF-YEARLY ',
    QUARTERLY = 'QUARTERLY ',
    MONTHLY = 'MONTHLY ',
}

In my .ts file i create my enum var:

SubscriptionEnum = SubscriptionEnum ;

And then i display the option in my .html:

<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select #subscriptionid="subscription">
   <option value="{{option.key}}"
           *ngFor="let option of SubscriptionEnum | keyvalue">
           {{option.value}}
   </option>
</select>

This example give me the select with all option and the value change in the view page when i clicked on a new option.

Then, i add the (change) in the select to call a method that change the content of the client subscription in the db. I did it like that: .html:

<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
<label for="subscription">Subscription:</label>
<select (change)="changeInfo(subscription )" #subscription id="subscription">
   <option value="{{option.key}}"
           *ngFor="let option of SubscriptionEnum | keyvalue">
            {{option.value}}
   </option>
</select>

In my changeInfo i send the event and take the event.id and the event.value to update my db and it works because the select option change when i click on it and the <p>{{client.subscription}}</p> that is a value of my db take the good value.

Then i wanted to add a selector so my option value take directly the good value and this is not working ... I add it like that:

<p>{{client.subscription}}</p> // here it display what is registered in my db, in this case "ANNUAL"
    <label for="subscription">Subscription:</label>
    <select (change)="changeInfo(subscription )" #subscription id="subscription">
       <option value="{{option.key}}"
               selected="{{option.key == client.subscription}}"
               *ngFor="let option of SubscriptionEnum | keyvalue">
                {{option.value}}
       </option>
    </select>

This give highlight me my sentence and tell me "Wrong attribute method" and when i reload my page my

div contains the good value which is "ANNUAL" but my option is equal to QUARTERLY. If i click to change the option, the good value will be saved in my db but the display of my select selector will be wrong.

What do i not understand ? Thank you for your help

Answer 1

There is a subtle difference between two similar Angular syntaxes:

selected="{{option.key == client.subscription}}"

and

[selected]="option.key == client.subscription"

There are both property bindings but the former assigns interpolated value to property.

It means that even in case of falsy values selected property will get true ;

el.selected = 'false'

because string is a truthy value in js.

So you can consider the following options:

• Use correct property binding:

   [selected]="option.key == client.subscription"

• Use value binding on <select> tag instead:

   <select #subscription id="subscription" [value]="client.subscription"> <option value="{{option.key}}" *ngFor="let option of SubscriptionEnum | keyvalue"> {{option.value}} {{option.key == client.subscription}} </option> </select>