Un component étant constitué d'un côté d'une classe TypeScript et de l'autre d'un template, on se pose rapidement la question suivante : comment donc faire communiquer ces deux entités ? Et bien ce sont pas moins de quatre types de "data binding" qui s'offrent à vous, selon que vous souhaitiez communiquer du template vers le code TypeScript ou l'inverse
String interpolation
La "string interpolation" permet d'afficher côté template, à l'aide d'une double accolade
{{ myVariable }}
, une propriété créée côté TypeScript (cas de communication de Component vers le DOM du template)
Property binding
Le "property binding" permet d'utiliser une propriété créée également côté TypeScript, pour en faire la valeur d'un attribut d'un élément du DOM (cas de communication de Component vers DOM du template également) via des crochet
<img [src]="myVariable" />
Event binding
L'"event binding" part cette fois du template pour envoyer un event et souvent des données en provenance du template - comme du texte saisi - à un Component, via un event handler qu'il faut alors créer côté TypeScript (communication du template vers le component). Côté template, l'event est entouré de parenthèses
<button (click)="sendMessage()">envoyer</button>
Two-way data binding
Enfin, le "two-way data binding", grâce à ngModel, qui permet à la fois de récupérer la valeur d'une propriété du Component, mais également de mettre à jour cette valeur automatiquement quand l'utilisateur la modifie. On utilise alors conjointement parenthèses et crochets
<input type="text" [(ngModel)]="myVariable" />