Nous avons souvent besoin d’afficher des données de manière claire et attrayante visuellement. Cela peut inclure le formatage de noms, de dates, de prix, de pourcentages ou d’éléments de liste.

Si vous essayez de gérer toutes ces transformations manuellement dans la logique du composant, nos templates peuvent rapidement devenir encombrés et désordonnés. Pour résoudre ce problème, Angular propose une fonctionnalité simple et élégante appelée pipes — un moyen de transformer les données directement dans le template.

Que sont les Pipes ?

Considérez un pipe comme un outil qui prend des données brutes, les traite et en produit une version modifiée — un peu comme un filtre dans un flux de données.

Utilisation des pipes dans Angular

Chaque fois que vous devez formater des données directement dans le template, vous pouvez appliquer un pipe en utilisant le symbole | (pipe) :

{{ value | pipeName }}

Il est également possible de chaîner plusieurs pipes :

{{ value | pipe1 | pipe2 }}

Certains pipes acceptent également des paramètres, que vous transmettez à l'aide de deux-points (:) :

{{ value | pipeName:param1:param2 }}

Angular propose un ensemble de pipes intégrés pour gérer les besoins courants de formatage — des nombres et des dates à la monnaie et aux transformations de casse. Voici des exemples concrets, en commençant par les bases et en allant vers des cas d'utilisation plus avancés.

Transformation de chaîne de caractères

Supposons que vous ayez une propriété username dans votre composant. Il est souvent utile de mettre en valeur ou d’accentuer le nom d’un utilisateur en l’affichant en lettres majuscules.

Ici, la propriété userName est récupérée depuis le composant et transformée en majuscules à l’aide du pipe intégré uppercase d’Angular. Ainsi, si userName = 'alex', le résultat affiché sur la page sera : ALEX.

Formatage des dates

En plus des chaînes de caractères, l'un des types de données les plus courants à formater est la date.

Supposons que vous disposiez d'un objet user. Vous souhaitez afficher la date à laquelle il a rejoint sous un format clair et lisible :

Si user.dateJoined = new Date(2023, 3, 15), le résultat serait : Joined on: April 15, 2023.

Le pipe date prend en charge un large éventail de formats, tels que short, medium, fullDate, ou même des formats personnalisés comme dd/MM/yyyy.

Affichage de la devise

Vous travaillez avec un objet product. Pour afficher le prix dans une devise spécifique, utilisez le pipe currency :

Si product.price = 199.99, le résultat sera : Price: $199.99.

Vous pouvez personnaliser le pipe de devise avec les paramètres régionaux, le style d'affichage et l'affichage ou non du symbole monétaire.

Il existe de nombreux autres pipes utiles dans Angular. Bien que vous ne les abordiez pas tous ici, voici une liste de référence rapide des pipes non encore mentionnés :

Pour en savoir plus sur chaque pipe, consultez la documentation Angular officielle.