16-2 Utilisation des Pipes (ex.: pour une date)
Angular offre des transformateurs de données pour l'affichage, appelés pipes.
Vous avez possiblement remarqué que la date est affichée de la façon suivante:
2023-09-11T19:58:19.000Z
C'est le format dans lequel Supabase envoie la date, mais c'est peu invitant pour un utilisateur. Heureusement, Angular propose une façon, à l'aide de pipe, de formater la date adéquatement lors de l'affichage.
Vous pouvez en lire plus sur les Pipes ici: https://angular.io/guide/pipes. Au fond, il s'agit d'une fonction qui prend en entrée des données, les transforme et retourne les données sous un format différent.
Nous utiliserons le DatePipe (https://angular.io/api/common/DatePipe) pour afficher la date de création.
Utiliser le DatePipe
Vous pouvez modifier la ligne responsable d'afficher la date de la façon suivante:
<!-- ... -->
<small class="text-body-secondary">Créé le: {{projet.created_at | date}}</small>
<!-- ... -->
Remarquez {{projet.created_at | date}}. Le nom Pipe vient de l'utilisation du symbole |. On indique ici de passer projet.created_at dans une fonction de transformation de données date.
Ce qui vous donnera le format suivant lors de l'affichage dans le navigateur:
Créé le: Jun 6, 2025
Préciser le format de date
Il est possible de préciser le format de date. Pour toutes les possibilités, vous pouvez consulter la documentation ici: https://angular.io/api/common/DatePipe
Il existe cependant quelques formats prédéfinis tels que date:'medium':
<small class="text-body-secondary">Créé le: {{projet.created_at | date:'medium'}}</small>
Ce format affichera la date de la façon suivante:
Créé le: Jun 6, 2025, 10:56:28 AM
C'est le format que j'utiliserai pour la suite, mais libre à vous d'utiliser le format qui vous convient ou de personnaliser l'affichage.