Angular - 2.12 Qu'est-ce que le DataBinding

Jusqu'ici, nous avons ajouté des composants à notre application et exploré les fondations d'Angular : démarrage, composants, modules. Mais nous n'avons produit que du contenu statique, codé en dur dans nos templates. C'est très limité pour une application réelle. Pour rendre nos composants vivants, on a besoin d'un mécanisme qui relie notre code TypeScript (la logique métier) à notre template HTML (ce que l'utilisateur voit). Ce mécanisme s'appelle le data binding.

Concrètement, le data binding sert à faire communiquer dans les deux sens le code TypeScript du composant et son template. Que l'on ait récupéré des données depuis un serveur ou qu'on les ait calculées dans une méthode TypeScript, on veut pouvoir les afficher à l'utilisateur sans réécrire le HTML à la main. À l'inverse, quand l'utilisateur clique sur un bouton, saisit du texte ou interagit avec un formulaire, on veut pouvoir déclencher du code TypeScript en réponse.

Les quatre formes de data binding

• Interpolation de chaîne : {{ data }} dans le HTML pour afficher une valeur TypeScript (sens TS → HTML).
• Property binding : [property]="data" pour lier une propriété DOM ou directive à une expression TS (sens TS → HTML).
• Event binding : (event)="onClick()" pour réagir aux événements utilisateur (sens HTML → TS).
• Two-way binding : [(ngModel)]="data" pour combiner les deux directions sur un input (sens TS ↔ HTML).

Ces quatre mécanismes constituent la colonne vertébrale de toute application Angular interactive. Dans les leçons qui suivent, nous allons examiner chacun en détail, voir comment l'utiliser concrètement, et l'appliquer à notre projet de cours. Vous comprendrez ainsi comment afficher des données dynamiques, comment réagir aux clics, à la saisie clavier, aux changements de sélection, et comment synchroniser un formulaire avec votre modèle TypeScript. Le data binding est ce qui transforme une application statique en une application réactive et utile.