CHAPITRE 7 : TEMPLATES ET INTERPOLATION

Le template est la partie visible du composant. Voyons comment y faire apparaître les données de la classe.

1. L'interpolation

Les doubles accolades affichent la valeur d'une propriété :

// dans la classe
export class AppComponent {
  nom = 'Awa';
  age = 20;
}

<!-- dans le template -->
<h1>Bonjour {{ nom }}</h1>
<p>Vous avez {{ age }} ans.</p>

La liaison est vivante : si nom change, l'affichage suit immédiatement, sans que vous ayez à y penser.

2. Ce que l'on peut écrire entre les accolades

<p>{{ 2 + 3 }}</p>                      <!-- 5 -->
<p>{{ nom.toUpperCase() }}</p>          <!-- AWA -->
<p>{{ age >= 18 ? 'Majeur' : 'Mineur' }}</p>
<p>{{ notes.length }}</p>
<p>{{ calculerMoyenne() }}</p>

Ce qui est interdit

• une affectation : {{ age = 21 }}
• new, ++, --
• ; ou plusieurs instructions

La règle derrière cette liste : un template affiche, il ne modifie pas. Toute logique appartient à la classe.

3. Attention aux appels de méthode

Une méthode écrite dans un template est appelée très souvent : à chaque cycle de détection de changement. Pour un calcul coûteux, préférez une propriété calculée une fois :

// plutot que d'appeler calculerMoyenne() dans le template
export class BulletinComponent {
  notes = [12, 15, 18];
  moyenne = this.notes.reduce((a, b) => a + b, 0) / this.notes.length;
}

4. Les pipes : mettre en forme l'affichage

Un pipe transforme une valeur au moment de l'afficher, sans modifier la donnée. On l'applique avec une barre verticale.

<p>{{ nom | uppercase }}</p>              <!-- AWA -->
<p>{{ nom | lowercase }}</p>              <!-- awa -->
<p>{{ prix | number:'1.2-2' }}</p>        <!-- 1500.00 -->
<p>{{ dateNaissance | date:'dd/MM/yyyy' }}</p>
<p>{{ description | slice:0:50 }}...</p>

On peut les enchaîner : {{ nom | lowercase | slice:0:3 }}.

5. Un cas concret

export class BulletinComponent {
  etudiant = 'Awa Ngono';
  matricule = '19A123';
  notes = [12, 15, 18, 9];
  dateEdition = new Date();

  get moyenne(): number {
    return this.notes.reduce((a, b) => a + b, 0) / this.notes.length;
  }
}

<h2>Bulletin de {{ etudiant | uppercase }}</h2>
<p>Matricule : {{ matricule }}</p>
<p>Moyenne : {{ moyenne | number:'1.2-2' }} / 20</p>
<p>Resultat : {{ moyenne >= 10 ? 'Admis' : 'Ajourne' }}</p>
<p>Edite le {{ dateEdition | date:'dd/MM/yyyy' }}</p>

À retenir

• {{ }} affiche une donnée, et suit ses changements
• Un template affiche : pas d'affectation, pas de logique lourde
• Un pipe met en forme sans modifier la donnée
• {{ objet | json }} est précieux pour déboguer