Pipes

Objectifs de ce chapitre

• ✔️
  Pipes

  Apprenez à personnaliser l'affichage des données dans les vues Angular à l'aide de pipes.

Pipes Angular

Angular fournit un ensemble de pipes intégrés pour transformer les données dans les Templates HTML (vues). Les pipes sont des fonctions simples qui acceptent une valeur d’entrée et renvoient une valeur transformée. Ils sont utilisés dans la vue (Template HTML) pour formater les données avant de les afficher.

Les pipes Angular sont utilisés avec l’opérateur de pipe | suivi du nom de la pipe. Vous pouvez enchaîner plusieurs pipes pour transformer les données dans la vue (Template HTML).

Voici les pipes Angular les plus utilisées :

• uppercase : transforme une chaîne de caractères en majuscule;
• minuscule : transforme une chaîne de caractères en minuscule;
• currency : formate un nombre en tant que devise;
• date : formate une date.

Vous utiliserez cette dernière pour formater la date createdAt de la tâche en un format plus lisible.

🎓 Instructions

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

   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 | date }}</td>
       <td></td>
       </tr>
   </tbody>
   </table>

2. Vérifiez les modifications dans votre navigateur 

La date de création de la tâche est affichée dans un format plus convivial.

Alternative

Une alternative courante pour transformer les données dans le Template HTML consiste à utiliser une fonction. Comme l’interpolation évalue l’expression JavaScript, vous pouvez lui transmettre une fonction qui renvoie une valeur.

Dans l’exemple suivant, nous utilisons une fonction pour formater la date de création de la tâche. La fonction prend la date de création de la tâche comme argument et renvoie une date formatée.

<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>{{ formatDate(task.createdAt) }}</td>
    <td></td>
    </tr>
    </tbody>
</table>

export class TaskListComponent {
  tasks = [
    { title: 'Tâche 1', createdAt: new Date() },
    { title: 'Tâche 2', createdAt: new Date() }
  ];

  formatDate(date: Date): string {
    // Obtenez le mois, le jour et l'année à partir de l'objet Date
    const month = currentDate.getMonth() + 1; // getMonth commence à 00 pour janvier, nous ajoutons donc 1
    const day = currentDate.getDate();
    const year = currentDate.getFullYear();
    return month + '/' + day + '/' + year;;
  }
}

Cela fonctionnera mais pas de façon aussi optimisée que l’utilisation de la pipe date. Angular utilise la détection de changement interne pour détecter les modifications dans le composant et mettre à jour la vue (Template HTML). Lors de l’utilisation d’une fonction dans le Template HTML, Angular appellera la fonction à chaque cycle de détection de changement, même si la date createdAt n’a pas changé. Les pipes mémorisent le résultat de la transformation et ne le recalculent que lorsque la valeur d’entrée change.

✔️ Ce que vous avez appris

Les pipes Angular permettent de transformer les données dans les vues (Templates HTML). Bien que cela ne soit pas abordé dans cette introduction, vous pouvez également créer des pipes personnalisées pour appliquer des transformations spécifiques à vos données.

🔗 Ressources

• Documentation officielle Angular: pipes