Dev Stack Source

Answer : When you use ngModel, the state is handled internally and any explicit change to it just gets ignored. In your example, you are setting the selected property of option , but you are also providing a (void) ngModel to your select , so Angular expects that the state of the select is provided within the ngModel. Briefly, you should leverage on your ngModel instead than setting the selected property: <select name="rate" #rate="ngModel" [(ngModel)]="yourModelName" required> <option value="hr">hr</option> <option value="yr">yr</option> </select> And: yourModelName: string; constructor() { this.yourModelName = 'hr'; } If you don't wish to have a two-way binding, you can set ngModel to the 'default' value and with the template local variable get the selected value: <select #rate ngModel="hr"> <option se...

Answer : What you can do is, DEMO : http://plnkr.co/edit/RXJ4D0YJrgebzYcEiaSR?p=preview <input type="text" [ngModel]="text" //<<<###changed [(ngModel)]="text" to [ngModel]="text" (ngModelChange)="textChanged($event)"> private textChanged(event) { console.log('changed', this.text, event); this.text=event; //<<<###added } So found kinda weird(at least for me) possible solution for this with least changes in the code in question. So on assigning the (ngModelChange) attribute before [(ngModel)] what I get is following with the same handler: changed *older value* *new value* I get the new value in this.text like so: setTimeout(() => console.log(this.text), 0); all you need to do is to put (ngModelChange)="textChanged($event)" to the left of [(ngModel)] element in the html tag, like: <input (whateve...