Angular - 2.16 Liaison de données bidirectionnelle

La liaison de données bidirectionnelle (two-way binding) est un mécanisme qui synchronise une propriété TypeScript et un élément du template dans les deux sens. Si la propriété change côté TS, le HTML se met à jour ; si l'utilisateur modifie le champ côté HTML, la propriété TS se met à jour automatiquement. C'est la combinaison parfaite du property binding et de l'event binding sur un même élément.

La syntaxe utilise les banana in a box (parenthèses dans des crochets) avec la directive ngModel : <input [(ngModel)]="userName">. Cette écriture est en fait un sucre syntaxique pour [ngModel]="userName" (ngModelChange)="userName = $event", qui combine un property binding (TS → HTML) et un event binding (HTML → TS).

Mise en place

• ngModel est une directive du module FormsModule.
• Il faut donc importer FormsModule depuis @angular/forms dans app.module.ts.
• Et ajouter FormsModule à la liste imports du décorateur @NgModule.
• Sans cela, Angular signalera une erreur : « Can't bind to 'ngModel' since it isn't a known property of 'input' ».

Concrètement, si on déclare userName = 'Naziff' dans la classe et qu'on lie un input avec [(ngModel)]="userName", le champ affichera « Naziff » au chargement. Si l'utilisateur tape autre chose, la propriété userName se met à jour en temps réel. Inversement, si une méthode du composant modifie userName, le champ se met à jour également. C'est ce qui rend les formulaires Angular si fluides à manipuler.

Dans les vraies applications, ngModel est surtout utilisé avec les formulaires Template-driven. Pour les formulaires plus complexes, on utilise plutôt les Reactive Forms (FormGroup, FormControl), que nous découvrirons plus loin dans le cours. Mais pour les cas simples, le two-way binding via [(ngModel)] reste la solution la plus rapide et la plus lisible.