Mettre à jour la classe du composant

Dans Angular, la logique et le comportement d'un composant sont définis dans sa classe TypeScript.

Dans cette activité, vous allez apprendre à mettre à jour la classe du composant et à utiliser l'interpolation.

1. Ajouter une propriété nommée city

   Mettez à jour la classe du composant en ajoutant une propriété nommée city à la classe App.

   export class App {
     city = 'San Francisco';
   }

   La propriété city est de type string, mais vous pouvez omettre le type grâce à l'inférence de type de TypeScript. La propriété city peut être utilisée dans la classe App et référencée dans le template du composant.

   
   

   Pour utiliser une propriété de classe dans un template, vous devez utiliser la syntaxe {{ }}.

2. Mettre à jour le template du composant

   Mettez à jour la propriété template pour qu'elle corresponde au HTML suivant :

   template: `Hello {{ city }}`,

   C'est un exemple d'interpolation, qui fait partie de la syntaxe de template d'Angular. Elle vous permet de faire bien plus que placer du texte dynamique dans un template. Vous pouvez aussi utiliser cette syntaxe pour appeler des fonctions, écrire des expressions et plus encore.

3. S'entraîner davantage avec l'interpolation

   Essayez ceci : ajoutez une autre paire de {{ }} contenant 1 + 1 :

   template: `Hello {{ city }}, {{ 1 + 1 }}`,

   Angular évalue le contenu des {{ }} et affiche le résultat dans le template.

Ce n'est qu'un aperçu de ce qu'il est possible de faire avec les templates Angular ; continuez votre apprentissage pour en découvrir davantage.