Angular 2 ngModelChange select option, grab a specific property

Question

I have a dropdown select form in angular 2.

Currently: When I select an option the option name gets passed into my onChange function as $event

Wanted: When I select an option I would like to pass workout.id into my onChange function.

How can I achieve that?

<select class="form-control" [ngModel]="selectedWorkout" (ngModelChange)="onChange($event)">
    <option *ngFor="#workout of workouts">{{workout.name}}</option>
</select>

Controller

onChange(value){
  alert(JSON.stringify(value));
}

micronyks · Accepted Answer · 2016-03-13T14:58:06.940

75

<select class="form-control" [ngModel]="selectedWorkout" (ngModelChange)="onChange($event)">
    <option *ngFor="#workout of workouts" [value]="workout.id">{{workout.name}}</option>
</select>

OR

<select class="form-control" [(ngModel)]="selectedWorkout" (change)="onChange($event.target.value)">
    <option *ngFor="#workout of workouts" [value]="workout.id" >{{workout.name}}</option>
</select>

check this

edited Mar 13 '16 at 14:58

answered Mar 13 '16 at 14:43

micronyks

54,797
15
112
146

Thank you, this was just what I was looking for! – Luke Schoen Jul 08 '16 at 12:48
Why method doesn't triggered in this case? ` ` – Roman Soviak Jun 12 '18 at 09:54

score 3 · Answer 2 · answered Aug 25 '17 at 05:47

3

you could also use [ngValue] inside option:

<select class="form-control" [ngModel]="selectedWorkout" (ngModelChange)="onChange($event)">
  <option *ngFor="#workout of workouts" [ngValue]="workout">{{workout.name}}</option>
</select>

answered Aug 25 '17 at 05:47

Roman Gural

116
4

Angular 2 ngModelChange select option, grab a specific property

2 Answers2

Linked