IE 9/10 dropdown two way binding issue in Angular 2
NickName:Waqas Ahmed Ask DateTime:2016-04-05T18:23:08

IE 9/10 dropdown two way binding issue in Angular 2

I am facing strange issue on IE 9/10. Two way binding works for all html elements except dropdown. Values do not get selected on the dropdown even if the value exists in the dropdown.

Here is the sample code.

HTML

<select [(ngModel)]="model.city" id="city">
  <option value="Lahore">Lahore</option>
  <option value="Karachi">Karachi</option>
</select>

TS (Angular 2)

this.model.city="Karachi";

Two way binding does not work for the above condition in IE.

I have included all shims that require for the IE but still it's not getting selected.

<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>

Copyright Notice:Content Author:「Waqas Ahmed」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/36423673/ie-9-10-dropdown-two-way-binding-issue-in-angular-2

Answers
Günter Zöchbauer 2016-04-05T10:27:23

This is a known issue \n\n\nhttps://github.com/angular/angular/issues/6703\nhttps://github.com/angular/angular/pull/7185\n\n\nYou can work around by adding the SelectControlValueAccessor from the linked PR manually until it is provided by Angular by default.\n\nSee also Selects' events in Angular2 and Angular2 access a select event change within the component for other workarounds.",


More about “IE 9/10 dropdown two way binding issue in Angular 2” related questions

IE 9/10 dropdown two way binding issue in Angular 2

I am facing strange issue on IE 9/10. Two way binding works for all html elements except dropdown. Values do not get selected on the dropdown even if the value exists in the dropdown. Here is the ...

Show Detail

Angular two way binding (different behavior in IE 9)

I am creating an Angular application and utilizing the Angular two way binding method for all of my inputs. The application must be supported for IE versions 9 an above. For the latest versions of ...

Show Detail

Parent Child Communication Issue On Angular 9 & 10

We have a lot component interaction in my project through @Input and @output annotations. With the recent upgrade from angular 9 &amp; 10 from angular 8 am facing few errors on passing the value to...

Show Detail

Angular 2 Two-way Data Binding redundant setter call

I wanted to implement Two-way Data Binding in my component following this tutorial: https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html . It works, but I discovered...

Show Detail

Angular two-way binding issue

I am in an Angular class and part of the assignment was to create a two way binding page with a form. I have literally no idea why my form is not displaying on the page when I run it. Here is the app.

Show Detail

Two way binding issue with ng select

I am creating a multiple dropdown using ng-select plugin.My scenario is like when a user selects the items from dropdown. i need to populate the selected item object in button with close icon just ...

Show Detail

Apply styles for IE 9 - 10

I'm coding an Angular 2 app and I need to cover with css IE 9-10. For the rest I have flexbox layout. But I need specifically cover IE 9-10 with non-flexbox styles. I've seen a way of doing this us...

Show Detail

Angular 2 Two Way Binding with ngClass

In Angular 2, does ngClass have two-way binding? currently i have something like following for a modal &lt;div class="modal autonomous" [(ngClass)]="{'modal-open' : modalState}"&gt; ... &

Show Detail

Bootstrap dropdown with two-way data binding for Angular 2

I've been trying to find an API for making custom bootstrap dropdowns using ngModel. So far, I've already tried to use the dropdown from Valor Software's ngx-bootstrap (formerly ng2-boostrap) and a...

Show Detail

Increasing Angular Performance in Custom Angular Dropdown with Filtering Functionality with One Way Binding

I have a custom angular component that works as a dropdown select element with filtering functionality. The input is a basic input element with several angular directives: &lt;input type="text" c...

Show Detail