(change) vs (ngModelChange) dans Angular : que choisir en 2024 ?

Introduction : pourquoi ce sujet explose-t-il sur Stack Overflow ?

\n\n

Si vous avez déjà codé en Angular et rencontré la gestion des changements dans un <input>, vous avez sûrement vu deux événements similaires : (change) et (ngModelChange). À première vue, c'est la même chose. En pratique, le diable se cache dans les détails. La question "(change) vs (ngModelChange) in Angular" accumule des milliers de vues sur Stack Overflow, et pour cause : un mauvais choix entraîne des bugs, des requêtes serveur inutiles et des nuits blanches.

\n\n

Dans cet article sur PythonLib, nous allons une fois pour toutes clarifier :

\n

\n
• Quelles sont les différences entre (change) et (ngModelChange) dans Angular ?
\n
• Quand utiliser chacun ?
\n
• Comment éviter les pièges courants ?
\n

\n

C'est parti ! 🚀

\n\n

En bref : que sont (change) et (ngModelChange) ?

\n\n

(change) est un événement DOM standard qui se déclenche lorsque l'élément perd le focus (blur) et que sa valeur a changé. Angular encapsule simplement l'événement natif change.

\n\n

(ngModelChange) est un événement de la directive ngModel. Il se déclenche à chaque fois que le modèle change — littéralement à chaque frappe de touche (sauf si ngModelOptions est utilisé).

\n\n

Important : ngModelChange ne peut pas être utilisé sans [(ngModel)]. Cela fait partie de la liaison bidirectionnelle.

\n\n

Voici un exemple minimal en TypeScript pour voir la différence :

\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="Entrez un nom">\n    <p>Valeur : {{ 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

Essayez de taper "Angular" — vous verrez : ngModelChange se déclenchera 7 fois (une par lettre), tandis que change ne se déclenchera qu'une seule fois, lorsque vous cliquerez en dehors du champ.

\n\n

Principales différences : tableau comparatif

\n\n

Pour plus de clarté, voici un tableau des différences clés 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ère	(change)	(ngModelChange)
Type d'événement	Événement DOM natif	Événement Angular (EventEmitter)
Quand se déclenche	Lors de la perte de focus + changement de valeur	À chaque changement du modèle (chaque saisie)
Valeur dans $event	Objet Event (nécessite d'extraire la valeur)	Nouvelle valeur du modèle (chaîne, nombre, etc.)
Dépendance à ngModel	Non requis (peut être utilisé sur n'importe quel input)	Nécessite [(ngModel)] ou [ngModel]
Performance	Élevée (se déclenche rarement)	Peut être fréquente (à chaque frappe)
Utilisation avec les formulaires	Formulaires réactifs, template-driven	Uniquement formulaires template-driven

\n\n

Quand utiliser (change) ?

\n\n

(change) est votre choix si :

\n

\n
• Vous devez réagir uniquement lorsque le champ