El evento de cambio solo se llama después de que el foco de la entrada ha cambiado. ¿Cómo puedo hacer que el evento se active en cada pulsación de tecla?

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

El segundo enlace cambia en cada pulsación de tecla por cierto.

Acabo de usar la entrada del evento y funcionó bien de la siguiente manera:

en archivo .html:

<input type="text" class="form-control" (input)="onSearchChange($event.target.value)">

en el archivo .ts:

onSearchChange(searchValue: string): void {  
  console.log(searchValue);
}

Use ngModelChangedividiendo la [(x)]sintaxis en sus dos partes, es decir, enlace de datos de propiedad y enlace de evento:

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

valuechange(newValue) {
  mymodel = newValue;
  console.log(newValue)
}

También funciona para la tecla de retroceso.

El evento (keyup) es tu mejor apuesta.

Veamos por qué:

1. (cambio) como mencionó, los desencadenantes solo cuando la entrada pierde el foco, por lo tanto, es de uso limitado.
2. (pulsación de tecla) se activa al presionar teclas, pero no se activa al presionar ciertas teclas como el retroceso.
3. (keydown) se activa cada vez que se presiona una tecla. Por lo tanto, siempre va por 1 carácter; ya que obtiene el estado del elemento antes de que se registrara la pulsación de tecla.
4. (keyup) es su mejor opción, ya que se activa cada vez que se completa un evento de pulsación de tecla, por lo tanto, esto también incluye el personaje más reciente.

Entonces (keyup) es el más seguro, ya que ...

• registra un evento en cada pulsación de tecla a diferencia del evento (cambio)
• incluye las teclas que (presionar tecla) ignora
• no tiene retraso a diferencia del evento (keydown)

<input type="text" [ngModel]="mymodel" (keypress)="mymodel=$event.target.value"/>
{{mymodel}}

Una forma diferente de manejar tales casos es usar formControl y suscribirse valueChangescuando se inicialice su componente, lo que le permitirá usar operadores rxjs para requisitos avanzados como realizar solicitudes http, aplicar un rebote hasta que el usuario termine de escribir una oración, tome el último valor y omitir anterior, ...

import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'some-selector',
  template: `
    <input type="text" [formControl]="searchControl" placeholder="search">
  `
})
export class SomeComponent implements OnInit {
  private searchControl: FormControl;
  private debounce: number = 400;

  ngOnInit() {
    this.searchControl = new FormControl('');
    this.searchControl.valueChanges
      .pipe(debounceTime(this.debounce), distinctUntilChanged())
      .subscribe(query => {
        console.log(query);
      });
  }
}

El evento secreto que mantiene ngModel angular síncrono es la entrada de llamada de evento . Por lo tanto, la mejor respuesta a su pregunta debería ser:

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

<input type="text" (keypress)="myMethod(myInput.value)" #myInput />

archivo .ts

myMethod(value:string){
...
...
}

Lo que estás buscando es

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

Luego haga lo que quiera con los datos accediendo al enlace this.mymodelen su archivo .ts.

En mi caso, la solución es:

[ngModel]="X?.Y" (ngModelChange)="X.Y=$event"

Para los formularios reactivos, puede suscribirse a los cambios realizados en todos los campos o solo en un campo en particular.

Obtenga todos los cambios de un FormGroup:

this.orderForm.valueChanges.subscribe(value => {
    console.dir(value);
});

Obtenga el cambio de un campo específico:

this.orderForm.get('orderPriority').valueChanges.subscribe(value => {
    console.log(value);
  });

He estado usando keyup en un campo numérico, pero hoy noté en Chrome que la entrada tiene botones arriba / abajo para aumentar / disminuir el valor que no se reconoce por keyup.

Mi solución es usar keyup y cambiar juntos:

(keyup)="unitsChanged[i] = true" (change)="unitsChanged[i] = true"

Las pruebas iniciales indican que esto funciona bien, se volverá a publicar si se encontraron errores después de más pruebas.