L’interpolation (syntaxe de template Angular)

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

Qu’est-ce que l’interpolation ?

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.

2) En revanche, accéder à obj.prop si obj est undefined ou null fait planter l’application avec l’erreur ????? et le template ne s’affichera pas.

<!-- ERREUR si `user` est undefined ou null -->
<p>{{ user.name }}</p>

<!-- Solution #1 : Safe navigation operator -->
<p>{{ user?.name }}</p>

<!-- Solution #2 : Tester si l'objet existe -->
<p *ngIf="user">{{ user?.name }}</p>

Il arrive fréquemment qu’un objet ne soit pas encode défini au moment où le template est affiché, notamment lorsque cet objet est chargé via une requête HTTP (asynchrone). Il faut donc mettre des garde-fous dans le template pour éviter les erreurs : le safe navigation operator permet d’avaler les erreurs si l’on pense que l’objet risque d’être undefined. La directive *ngIf permet d’afficher la balise et ce qu’elle contient uniquement si l’objet existe.

Les deux solutions produisent un HTML légèrement différent : avec le safe navigation operator, la balise <p>...</p> est toujours affichée, alors qu’avec *ngIf elle n’est affichée que si l’objet existe.

Informations

Tags : templates

Dernière mise à jour :

Auteur : AngularChef

Qualité : Pas finalisé