keypress and click events should be triggered after ng-model changes the value

THIS IS A FEATURE REQUEST. I’m currently using Angular 2.2.1

I’m trying to respond to an input field change event like this…

<input type="text" [(ngModel)]="user.name" (keypress)="doSomething()">

The only problem with “(keypress)” is that “user.name” will not yet contain the most recent value when the doSomething() method is fired because events such as ‘keypress’ and ‘click’ are triggered before ng-model changes the value. Therefore, it has been recommended to use “(ngModelChange)” instead.

<input type="text" [(ngModel)]="user.name" (ngModelChange)="doSomething()">

But the dilemma with “(ngModelChange)” is that the method doSomething() will get triggered not only when the user is typing in the input field, but also whenever any changes are made to the model programmatically.

WANTED: Something like “(keypress)” where the event is triggered after ng-model changes the value (I’ve yet to understand why this shouldn’t be the default behavior) OR alternatively, a way to know within “(ngModelChange)” whether the event was triggered in response to a user interaction with the input field as opposed to a programmatic change to the model, as a workaround.

See similar closed issue: “click event triggers before ng-model changes the value.” #3406

[stenflo]

RESOLVED!!!

My solution was to use (input) instead of (keypress) or (ngModelChange).

My pitfall was that I didn’t know about (input), and I don’t see it mentioned in the docs.

I’m marking this issue as closed. Thanks for all the help on this one!!!

[zoechi]

@irrfan13 sounds like you are looking for keydown. You can listen to any DOM event using (event)="..." binding. input also is just the DOM event the browser provides. ngModelChange is an Angular event as ng... indicates.