Angular - 2.13 Interpolation de chaînes de caractères-eng

L'interpolation de chaîne est la forme la plus simple et la plus courante de data binding en Angular. Elle permet d'afficher dynamiquement, dans le template HTML, la valeur d'une propriété définie dans la classe TypeScript du composant. La syntaxe est très lisible : on entoure le nom de la propriété de doubles accolades, comme dans <p>{{ serverName }}</p>.

Entre les accolades, on peut placer toute expression TypeScript qui s'évalue en une chaîne ou en une valeur affichable (nombre, booléen converti, etc.). On peut donc écrire {{ 'Bonjour ' + userName }}, {{ 5 + 3 }}, ou encore appeler une méthode du composant qui retourne une string : {{ getStatus() }}. En revanche, on ne peut pas y placer d'instructions (boucles, déclarations, blocs), seulement des expressions.

Règles pratiques

• La propriété appelée entre accolades doit être publique dans la classe TypeScript du composant.
• L'expression doit retourner une valeur affichable (string, number, boolean) ; un objet sera converti via toString().
• Pas d'effets de bord recommandés (modifier un état, faire un appel HTTP) : la fonction sera ré-évaluée à chaque cycle de change detection.
• L'interpolation est unidirectionnelle : elle pousse la valeur du TypeScript vers le HTML, mais l'inverse n'est pas possible avec cette syntaxe.

Dans la pratique, on utilise l'interpolation pour afficher des libellés, des titres, des valeurs calculées, des compteurs, des messages dynamiques — bref, dès qu'on veut intégrer une donnée du composant dans le texte du template. C'est la première brique du data binding qu'il faut maîtriser, car elle est utilisée partout. Dans les leçons suivantes, nous verrons comment lier non pas du texte mais une propriété d'un élément HTML ou d'une directive (property binding), ce qui ouvre la porte à des liaisons plus puissantes.