How can I get new selection in "select" in Angular 2?

Question

I am using Angular 2 (TypeScript).

I want to do something with the new selection, but what I get in onChange() is always the last selection. How can I get the new selection?

<select [(ngModel)]="selectedDevice" (change)="onChange($event)">    <option *ngFor="#i of devices">{{i}}</option> </select> 

onChange($event) {     console.log(this.selectedDevice);     // I want to do something here with the new selectedDevice, but what I     // get here is always the last selection, not the one I just selected. } 

Answer 1

If you don't need two-way data-binding:

<select (change)="onChange($event.target.value)">     <option *ngFor="let i of devices">{{i}}</option> </select>  onChange(deviceValue) {     console.log(deviceValue); } 

For two-way data-binding, separate the event and property bindings:

<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2">     <option [value]="i" *ngFor="let i of devices">{{i}}</option> </select> 

export class AppComponent {   devices = 'one two three'.split(' ');   selectedDevice = 'two';   onChange(newValue) {     console.log(newValue);     this.selectedDevice = newValue;     // ... do other stuff here ... } 

---

If devices is array of objects, bind to ngValue instead of value:

<select [ngModel]="selectedDeviceObj" (ngModelChange)="onChangeObj($event)" name="sel3">   <option [ngValue]="i" *ngFor="let i of deviceObjects">{{i.name}}</option> </select> {{selectedDeviceObj | json}} 

export class AppComponent {   deviceObjects = [{name: 1}, {name: 2}, {name: 3}];   selectedDeviceObj = this.deviceObjects[1];   onChangeObj(newObj) {     console.log(newObj);     this.selectedDeviceObj = newObj;     // ... do other stuff here ...   } } 

---

Plunker - does not use <form>
Plunker - uses <form> and uses the new forms API

Answer 2

You can pass the value back into the component by creating a reference variable on the select tag #device and passing it into the change handler onChange($event, device.value) should have the new value

<select [(ng-model)]="selectedDevice" #device (change)="onChange($event, device.value)">     <option *ng-for="#i of devices">{{i}}</option> </select>  onChange($event, deviceValue) {     console.log(deviceValue); }