Angular 2 change event on every keypress
Use ngModelChange
by breaking up the [(x)]
syntax into its two pieces, i.e., property databinding and event binding:
<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />
{{mymodel}}
valuechange(newValue) {
mymodel = newValue;
console.log(newValue)
}
It works for the backspace key too.
I just used the event input and it worked fine as follows:
in .html file :
<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">
in .ts file :
onSearchChange(searchValue: string): void {
console.log(searchValue);
}
The (keyup) event is your best bet.
Let's see why:
- (change) like you mentioned triggers only when the input loses focus, hence is of limited use.
- (keypress) triggers on key presses but doesn't trigger on certain keystrokes like the backspace.
- (keydown) triggers every time a key is pushed down. Hence always lags by 1 character; as it gets the element state before the keystroke was registered.
- (keyup) is your best bet as it triggers every time a key push event has completed, hence this also includes the most recent character.
So (keyup) is the safest to go with because it...
- registers an event on every keystroke unlike (change) event
- includes the keys that (keypress) ignores
- has no lag unlike the (keydown) event