Angular - 2.18 Liaison de données bidirectionnelle

Dans cette leçon, nous revenons sur la liaison bidirectionnelle (two-way binding) pour bien comprendre comment elle fonctionne en interne. La syntaxe [(ngModel)]="userName" que nous avons utilisée précédemment est en fait un raccourci pour deux liaisons combinées sur le même élément.

Décomposition de [(ngModel)]

• Property binding : [ngModel]="userName" pousse la valeur TS vers l'input.
• Event binding : (ngModelChange)="userName = $event" met à jour la propriété TS quand l'input change.
• Forme combinée : [(ngModel)]="userName" = les deux ci-dessus.

Écrire la version décomposée a un intérêt pédagogique mais aussi pratique : si l'on veut intercepter le changement pour faire un traitement supplémentaire (validation, logging, transformation), on peut remplacer l'event binding par sa propre méthode : [ngModel]="userName" (ngModelChange)="onNameChange($event)", puis écrire la logique souhaitée dans onNameChange().

Cette décomposition montre aussi que la syntaxe « banana in a box » [()] n'est pas magique : elle exprime simplement le fait que la liaison va dans les deux sens. Tout composant Angular peut d'ailleurs exposer son propre two-way binding en déclarant à la fois un @Input() et un @Output() qui suivent la convention de nommage xxx / xxxChange. C'est ainsi qu'on peut créer ses propres directives synchronisables.

Rappel essentiel : ngModel nécessite l'import du FormsModule dans app.module.ts. Sans cet import, Angular ne reconnaît pas la directive et lève une erreur claire au démarrage. C'est l'une des erreurs les plus fréquentes des débutants : oublier d'ajouter FormsModule à la liste imports du @NgModule.