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));
}
<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>
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>