Initializing Select value dynamically in angular2

Question

I am setting value of select option in a loop . Have a look at the code

<div *ngFor="let sport of sport_data;" class="row">
  <select [(ngModel)]="sports.value" class="form-control">
      <option value="football">Sports</option>
      <option value="cricket">Cricket</option>
  </select>
</div>

Here sport_data is the array of list of sports . Its not working fine . Is their any other way to set default value of select element?

Kergoss · Accepted Answer · 2017-06-04 09:16:45Z

1

Should the select have a binding to the "sport" variable of the *ngFor? In that case it seems that you have a typo, as you bind the ngModel to "sports" and not "sport". The code should look like this:

<div *ngFor="let sport of sport_data;" class="row">
  <select [(ngModel)]="sport.value" class="form-control">
      <option value="football">Sports</option>
      <option value="cricket">Cricket</option>
  </select>
</div>

As you asked for it, a different approach could be to use the (change) event on the select to set the value and the [selected] binding for the option to be selected.

answered Jun 4, 2017 at 9:16

Kergoss

964 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MOHIT Over a year ago

Here I am using ngmodel to set default value and sport.value returns value like football and cricket . Even after correcting my typo error its not working .

Kergoss Over a year ago

@MOHIT I made a small plunkr with your code, see link. Is this what you want to achieve? I.e. multiple selection boxes for each field of your sport_data?

MOHIT Over a year ago

Yes thats what i was trying to achieve . Thanks

Collectives™ on Stack Overflow

Initializing Select value dynamically in angular2

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related