Afficher du texte dynamiquement avec l’interpolation

L’interpolation est une syntaxe qu’on peut utiliser dans un template de composant Angular et qui permet d’afficher du texte dynamiquement.

Définition et syntaxe

L’interpolation permet d’afficher du texte dynamiquement dans le template d’un composant.

Ce texte vient généralement d’une propriété ou d’une méthode de la classe associée au template. Ça peut également être un petit bout de code JavaScript qui sera évalué, par exemple un opérateur ternaire.

Syntaxe générale :

<p>Le temps est {{ expression }}.</p>

expression est “un petit bout de code qui sera évalué et doit renvoyer une chaîne de caractères”.

Exemples d’interpolation

Classe :

export class MeteoComponent {
  // Propriétés
  weather = 'ensoleillé';
  obj = {weather: 'ensoleillé'};
  temp = 35;

  // Méthode
  getWeather() {
    return 'ensoleillé';
  }
}

Template :

<p>
  Le temps est {{ weather }}.
  Le temps est {{ obj.weather }}.
</p>

<p>
  Le temps est {{ getWeather() }}.
</p>

<p>
  Le temps est {{ temp > 30 ? 'chaud' : 'ok' }}.
</p>

<!-- Affiche une chaîne vide -->
<p>
  Le temps est {{ coucou }}.
</p>

Remarques :

1) Interpoler une variable undefined ou null renvoie une chaîne vide. Dans l’exemple, l’interpolation {{coucou}} ne pose donc pas de problème.

Voir Présentation d’Angular - Quelles applis “SPA” peut-on coder avec Angular ?.