Angular 2 change event on every keypress

Question

The change event is only called after the focus of the input has changed. How can I make it so that the event fires on every keypress?

<input type="text" [(ngModel)]="mymodel" (change)="valuechange($event)" /> {{mymodel}} 

The second binding changes on every keypress btw.

Answer 1

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); } 

Answer 2

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.