How can I get new selection in “select” in Angular 2?

by

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

More Related Contents:

  1. Difference between Constructor and ngOnInit
  2. access key and value of object using *ngFor
  3. How to apply filters to *ngFor?
  4. Dynamically add event listener
  5. flatMap, flat, flatten doesn’t exist on type any[]
  6. Angular 2 – Execute code when closing window
  7. How to iterate object keys using *ngFor?
  8. localStorage is not defined (Angular Universal)
  9. Angular 2 Form “Cannot find control with path”
  10. Angular 2 Read More Directive
  11. When to use Interface and Model in TypeScript / Angular
  12. vs
  13. How to cancel/unsubscribe all pending HTTP requests in Angular 4+
  14. Angular 2 Basic Authentication not working
  15. How to pass data to dialog of angular material 2
  16. How to smooth scroll to page anchor in angular 4 without plugins properly?
  17. Angular 2 + Ionic 2: Detect if an object was modified
  18. Http.get() working but not working in build(Release/Debug) in Ionic 4
  19. Property ‘json’ does not exist on type ‘Object’
  20. inject() must be called from an injection context
  21. Update parent component property from child component in Angular 2
  22. How to use variable to define templateUrl in Angular2
  23. Behaviour subject initial value null?
  24. Angular 4/5 HttpClient: Argument of type string is not assignable to ‘body’
  25. What is pipe for in RxJS?
  26. How to throw error from RxJS map operator (angular)
  27. How to use MatPaginatorIntl?
  28. Angular 2 disable sanitize
  29. Can I use Angular i18n to translate string literals in typescript code
  30. How to generate components in a specific folder with Angular CLI?

Leave a Comment