ng-change / ng-blur / ng-keyup en Angular moderno

Cada directiva de evento ng-* pasa a ser un binding de evento entre paréntesis con el nombre nativo del evento del DOM. ng-change pasa a ser una suscripción al control del formulario.

Antes · AngularJS

<input ng-model="vm.query"
       ng-change="vm.search()"
       ng-blur="vm.touched = true"
       ng-keyup="$event.keyCode === 13 && vm.submit()">
<button ng-click="vm.clear($event)">Clear</button>

Después · Angular

<input [formControl]="query"
       (blur)="touched.set(true)"
       (keyup.enter)="submit()" />
<button (click)="clear($event)">Clear</button>

// component
query = new FormControl('', { nonNullable: true });

constructor() {
  this.query.valueChanges
    .pipe(debounceTime(300), takeUntilDestroyed())
    .subscribe(() => this.search());
}

Qué cambia

ng-click, ng-blur, ng-keyup y las demás pasan a ser (click), (blur), (keyup); $event sigue disponible.
Los filtros de tecla como (keyup.enter) reemplazan los chequeos manuales de keyCode.
ng-change pasa a ser valueChanges en un FormControl, o (ngModelChange) cuando usas ngModel.

Consejo de migración. ng-change solo se disparaba con cambios hechos por el usuario. valueChanges también emite cuando el código llama a setValue, así que pasa emitEvent: false donde un handler se dispararía a sí mismo.

Relacionado

¿Planeas una migración o una plataforma de microfrontends?

En una llamada de 20 minutos me cuentas tu situación y te digo cómo la abordaría. Si todavía no vale la pena, también te lo digo.

Escríbeme por LinkedIn