How to set the first item in a select drop down using ngFor in Angular

Question

I have this drop down below and it has all the countries in it, but doesn't display the first value ('United States'). How can I get the first item to be the selected one?

Is it possible to have a conditional statement that sets 'selected' if index = 0? I know two bindings aren't possible, but I'm looking at other alternatives.

<div class="form-group">
  <select id="country" class="form-control" formControlName="countryList">
    <option *ngFor="let country of countryList;" value={{country}}>
      {{country}}
    </option>
  </select>
</div>

and below is what I see in the page. No item is initially selected. It's blank until I select something!

Update - I'm trying this below, but it doesn't seem to work either.

[value]="country" 
[selected]="country == 'United States' ? true : null"

CountryList looks like this

export class Countries {
  countryList: string[] = ['United States', 'Afghanistan', 'Albania'];
  CountryList() {
    return this.countryList;
  }
}

// to initialize it, in my component I do this
countryList: string[] = new Countries().countryList;

funny thing is, it's selected (checkd) in the drop down list, it's just that nothing is displayed in the tag as soon as the page is rendered. — chuckd, Jul 14 '19 at 20:47
I think its related to css class you are using, as by default its first one and should be selected — ElasticCode, Jul 14 '19 at 20:48
just removed it, and it dodn't change anything except removed the bootstrap styling — chuckd, Jul 14 '19 at 20:50
BUT I just removed formControlName and that fixed it! Wonder why? — chuckd, Jul 14 '19 at 20:51
Check this answer https://stackoverflow.com/a/47011771/3134112 — ElasticCode, Jul 14 '19 at 21:15

score 1 · Answer 1 · answered Jul 14 '19 at 20:53

1

Assign initial value to the formControl which you want from the countryList.

ex:- controlModel.controls['countryList'].setValue('United States');

answered Jul 14 '19 at 20:53

Sathiya Narayanan

11
2

How to set the first item in a select drop down using ngFor in Angular

1 Answers1