4

I have 2 objects in my project: a company and an user. I have a form where the user can update his profile. One of the things he can update is the country. Now to show the countries I use a dropdown list.

I want to set the selected attribute in the option where the name of the country is equal to the actual country of the user. (country.name==user.country)

This is what I have tried but It doesn't seem to work.

<select>
    <option *ngFor="#c of countries" [ngStyle]="setStyles()" [ngValue]="c">{{c.name}}</option>          
</select>

setStyles(){
    let styles;
    if (this.companies[i].name == this.user.country ) {
        styles = {
            'selected'
        } 
    return styles;
}
Claudiu Matei
  • 4,091
  • 3
  • 19
  • 33

1 Answers1

8

I would try the following:

<select>
  <option *ngFor="#c of countries"
       [attr.selected]="c.name == user.country ? true : null" 
       [ngValue]="c">
    {{c.name}}
  </option>
</select>

I think that it's an attribute you need and not a style.

Thierry Templier
  • 198,364
  • 44
  • 396
  • 360