Angular 2 beta – Select not working (except in Chrome)

Question

I just have a simple question regarding select element. I spent quite some time debugging my code, because select element did not pick up changes. But then I found out something interesting. They have form example on their page angualr.io: https://angular.io/resources/live-examples/forms/ts/plnkr.html. If you try this example in browser other than Chrome, like Firefox, Edge, IE11 – the select element doesn’t detect changes. Have anyone else notice this problem or I’m missing something? Because change detection in dropdown element like Select is a basec thing … I just cannot believe it doesn’t work.

Answer 1

I think that this answer could provide you a work around and the Mark's answer:

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

Here is some code:

@Component({
  (...)
  template: `
    <select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)">
      <option *ngFor="#i of devices">{{i}}</option>
    </select>
  `)
  export class SomeComponent {

    onChange(newValue) {
      console.log(newValue);
      this.selectedDevice = newValue;
      // ... do other stuff here ...
    }
  }

Answer 2

This issue is also discussed at the angular github

Adding the shims Angular uses for unit testing its framework (before all other scripts) helps solve a lot of IE issues: https://github.com/angular/angular/blob/master/modules/angular2/src/testing/shims_for_IE.js

This particular case is solved by this particular function.

if (!Object.hasOwnProperty('name')) {
    Object.defineProperty(Function.prototype, 'name', {
        get: function() {
            var matches = this.toString().match(/^\s*function\s*(\S*)\s*\(/);
            var name = matches && matches.length > 1 ? matches[1] : "";
            // For better performance only parse once, and then cache the
            // result through a new accessor for repeated access.
            Object.defineProperty(this, 'name', {value: name});
            return name;
        }
    });
}

Answer 3

This issue was fixed in beta.16 https://github.com/angular/angular/blob/master/CHANGELOG.md#200-beta16-2016-04-26