10. Syntaxe de template : Interpolation {{ }}

Les templates Angular utilisent une syntaxe spécifique pour afficher des données, répondre aux entrées utilisateur et modifier dynamiquement la vue HTML. L'interpolation est la forme la plus simple de liaison de données (data binding).

Qu'est-ce que l'interpolation ?

L'interpolation utilise des doubles accolades ({{ }}) pour intégrer la valeur d'une propriété de composant dans le template HTML.

Angular évalue l'expression à l'intérieur des accolades, convertit le résultat en chaîne de caractères et l'affiche dans le navigateur.

Exemple d'interpolation

Classe du composant (data-display.component.ts) :

typescript export class DataDisplayComponent { appName: string = 'Projet Phoenix'; version: number = 1.0; launchDate: Date = new Date(2023, 11, 15); price: number = 49.99;

get statusMessage(): string { return Statut actuel : Actif (v${this.version}); } }

Template (data-display.component.html) :

html

Bienvenue sur {{ appName }}

Version : {{ version }}

{{ statusMessage }}

Total des articles : {{ 5 + 3 }}

Nom de l'app en majuscules : {{ appName.toUpperCase() }}

Date de lancement : {{ launchDate }}

Règles de l'interpolation

• L'expression doit renvoyer une chaîne de caractères ou une valeur pouvant être facilement convertie en chaîne.
• Vous pouvez accéder aux propriétés, appeler des méthodes (les getters sont préférables) et utiliser l'arithmétique/logique de base.
• Vous ne pouvez pas utiliser d'assignations (=, +=, etc.), d'opérateurs new ou d'opérateurs de chaînage comme ++.