Data binding connecte une classe de composant avec son template. Angular a quatre formes, distinguées par la direction du flux de données et leur syntaxe distinctive.
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
Les crochets [ ] lient une propriété à une expression (unidirectionnel, le flux de données s'écoule vers le bas dans la vue).
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
Les parenthèses ( ) écoutent les événements (unidirectionnel, le flux de données s'écoule vers le haut de la vue vers la classe).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
La syntaxe [(...)] (« banana in a box ») combine la liaison de propriété + la liaison d'événement pour une synchronisation bidirectionnelle — plus couramment avec ngModel sur les entrées de formulaire.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
La liaison bidirectionnelle [()] est simplement la liaison de propriété [] plus la liaison d'événement () combinées — les crochets montrent les directions.
Data binding est la façon dont Angular maintient la classe et le template synchronisés — c'est le mécanisme derrière chaque interface utilisateur dynamique.
Connaître les quatre types et leur syntaxe ({{}}, [], (), [()]) et quelle direction chacun suit est essentiel pour lire et écrire n'importe quel template Angular ; presque chaque ligne d'un template Angular en utilise un.