(change) vs (ngModelChange) no Angular: o que escolher em 2024?

Introdução: por que este tópico explode no Stack Overflow?

\n\n

Se você já escreveu em Angular e lidou com o tratamento de mudanças em <input>, certamente viu dois eventos semelhantes: (change) e (ngModelChange). À primeira vista — a mesma coisa. Na prática — o diabo está nos detalhes. A pergunta "(change) vs (ngModelChange) in Angular" acumula milhares de visualizações no Stack Overflow, e não é à toa: a escolha errada leva a bugs, requisições extras ao servidor e noites sem dormir.

\n\n

Neste artigo no PythonLib, vamos de uma vez por todas esclarecer:

\n

\n
• Qual a diferença entre (change) e (ngModelChange) no Angular?
\n
• Quando usar cada um?
\n
• Como evitar as armadilhas comuns?
\n

\n

Vamos lá! 🚀

\n\n

Resumindo: o que são (change) e (ngModelChange)?

\n\n

(change) — é um evento DOM padrão que é disparado quando o elemento perde o foco (blur) e seu valor mudou. O Angular simplesmente encapsula o evento nativo change.

\n\n

(ngModelChange) — é um evento da diretiva ngModel. Ele é disparado toda vez que o modelo muda — literalmente a cada pressionamento de tecla (a menos que ngModelOptions seja usado).

\n\n

Importante: ngModelChange não pode ser usado sem [(ngModel)]. Ele faz parte da ligação bidirecional.

\n\n

Aqui está um exemplo mínimo em TypeScript para ver a diferença:

\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="Digite o nome">\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

Tente digitar "Angular" — e você verá: ngModelChange será disparado 7 vezes (uma por letra), enquanto change será disparado apenas uma vez, quando você clicar fora do campo.

\n\n

Principais diferenças: tabela comparativa

\n\n

Para ficar claro, aqui está uma tabela com as principais diferenças 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

Critério	(change)	(ngModelChange)
Tipo de evento	Evento DOM nativo	Evento Angular (EventEmitter)
Quando é disparado	Ao perder o foco + valor alterado	A cada alteração do modelo (cada entrada)
Valor em $event	Objeto Event (é necessário extrair o value)	Novo valor do modelo (string, número, etc.)
Dependência do ngModel	Não é necessário (pode ser usado em qualquer input)	Requer [(ngModel)] ou [ngModel]
Desempenho	Alto (disparado raramente)	Pode ser frequente (a cada keypress)
Uso com formulários	Formulários reativos, template-driven	Apenas formulários template-driven

\n\n

Quando usar (change)?

\n\n

(change) — é a sua escolha se:

\n

\n
• Você precisa reagir apenas quando o campo