Aller au contenu
Angular Tutorials

Interpolation

Objectifs de ce chapitre

  • ✔️
    Interpolation
    Découvrez comment restituer des données dans une vue (Template HTML) à l'aide de l'interpolation.

Vous parcourez maintenant le tableau tasks mais affichons une valeur Task statique. Maintenant ? Vous souhaitez afficher dynamiquement la dernière version de la tâche à la place.

Qu’est-ce que l’interpolation ?

L’interpolation est la solution pour évaluer une expression JavaScript dans le Template HTML. Bien qu’une partie de votre contenu HTML soit statique, vous souhaiterez peut-être afficher des données dynamiques dans votre vue. Cela nous permet d’afficher la valeur d’une propriété définie depuis le fichier composant.ts dans le Template HTML.

Voilà votre situation souhaitée : afficher les détails de chaque tâche!

Vous utiliserez les délimiteurs {{ }} pour identifier l’expression à évaluer. Vous pouvez utiliser n’importe quelle expression TypeScript valide entre ces délimiteurs d’interpolation.

<div>{{ name }}</div> => Gerome
<div>{{ 1 + 1 }}</div> => 2
<div>{{ 'Hello ' + name }}</div> => Hello Gerome

🎓 Instructions

  1. Modifiez le fichier src/app/task-list.component.html.

    <table class="table">
        <thead>
        <tr>
            <th>Nom</th>
            <th>Date</th>
            <th>Actions</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let task of tasks">
    

        <td>{{ task.title }}</td>
        <td>{{ task.createdAt }}</td>
        <td></td>
        </tr>
    </tbody>
    </table>

  2. Vérifiez les modifications dans votre navigateur 

L’interpolation évalue les propriétés task.title et task.createdAt et affiche les valeurs dans le navigateur.

✔️ Ce que vous avez appris

L’interpolation est l’une des fonctionnalités Angular les plus courantes. Vous l’utiliserez dans presque tous les composants pour afficher des données dynamiques.

🔗 Ressources