(change) vs (ngModelChange) en Angular: ¿qué elegir en 2024?

Introducción: ¿por qué este tema explota Stack Overflow?

\n\n

Si alguna vez has escrito en Angular y te has encontrado con el manejo de cambios en un <input>, seguramente has visto dos eventos similares: (change) y (ngModelChange). A primera vista, son lo mismo. En la práctica, el diablo está en los detalles. La pregunta "(change) vs (ngModelChange) in Angular" acumula miles de visitas en Stack Overflow, y no es casualidad: una elección incorrecta provoca errores, solicitudes innecesarias al servidor y noches sin dormir.

\n\n

En este artículo de PythonLib aclararemos de una vez por todas:

\n

\n
• ¿En qué se diferencian (change) y (ngModelChange) en Angular?
\n
• ¿Cuándo usar cada uno?
\n
• ¿Cómo evitar las trampas típicas?
\n

\n

¡Allá vamos! 🚀

\n\n

En resumen: ¿qué son (change) y (ngModelChange)?

\n\n

(change) es un evento DOM estándar que se dispara cuando un elemento pierde el foco (blur) y su valor ha cambiado. Angular simplemente envuelve el change nativo.

\n\n

(ngModelChange) es un evento de la directiva ngModel. Se dispara cada vez que el modelo cambia, literalmente con cada pulsación de tecla (a menos que se use ngModelOptions).

\n\n

Importante: ngModelChange no se puede usar sin [(ngModel)]. Es parte del enlace bidireccional.

\n\n

Aquí tienes un ejemplo mínimo en TypeScript para ver la diferencia:

\n\n

// app.component.ts\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  template: `\n    <input\n      [ngModel]="name"\n      (ngModelChange)="onNgModelChange($event)"\n      (change)="onChange($event)"\n      placeholder="Ingrese nombre">\n    <p>Valor: {{ name }}</p>\n  `\n})\nexport class AppComponent {\n  name = '';\n\n  onNgModelChange(value: string) {\n    console.log('ngModelChange:', value);\n  }\n\n  onChange(event: Event) {\n    console.log('change:', (event.target as HTMLInputElement).value);\n  }\n}\n

\n\n

Intenta escribir "Angular" y verás: ngModelChange se disparará 7 veces (una por letra), mientras que change solo una vez, cuando hagas clic fuera del campo.

\n\n

Diferencias principales: tabla comparativa

\n\n

Para que quede claro, aquí tienes una tabla con las diferencias clave entre (change) vs (ngModelChange):

\n\n\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

Criterio	(change)	(ngModelChange)
Tipo de evento	Evento DOM nativo	Evento de Angular (EventEmitter)
Cuándo se dispara	Al perder el foco + cambio de valor	Con cada cambio del modelo (cada entrada)
Valor en $event	Objeto Event (hay que extraer el value)	Nuevo valor del modelo (cadena, número, etc.)
Dependencia de ngModel	No requerida (se puede usar en cualquier input)	Requiere [(ngModel)] o [ngModel]
Rendimiento	Alto (se dispara con poca frecuencia)	Puede ser frecuente (en cada pulsación de tecla)
Uso con formularios	Formularios reactivos, template-driven	Solo formularios template-driven

\n\n

¿Cuándo usar (change)?

\n\n

(change) es tu elección si:

\n

\n
• Necesitas reaccionar solo cuando el campo