Un guide complet sur les pipes dans Angular

Les pipes dans Angular permettent aux utilisateurs de transformer les données avant qu’elles ne soient affichées dans la vue. Les pipes sont similaires aux filtres dans d’autres langages de programmation, mais ils sont plus flexibles et peuvent être personnalisés pour répondre à des besoins spécifiques. Ici, vous allez explorer comment utiliser les pipes dans votre application Angular.

Que sont les tuyaux dans Angular ?

Les pipes Angular sont des transformateurs de données qui rendent votre application plus dynamique. Ils prennent une valeur en entrée et renvoient une valeur transformée en sortie. La transformation des données peut être aussi simple que le formatage d’une date ou d’une devise, ou aussi complexe que le filtrage ou le tri d’une liste d’éléments.

Vous pouvez utiliser les pipes dans vos composants Angular et vos templates. Les pipes sont faciles à utiliser, et vous pouvez les enchaîner pour créer des transformations plus complexes.

Angular fournit plusieurs tuyaux intégrés, notamment DatePipe, UpperCasePipe, LowerCasePipe, Tuyau de monnaie, Tube décimal, Tuyau de pourcentage, JsonPipe, SlicePipe et AsyncPipe. Il fournit également la fonctionnalité permettant de créer des tuyaux personnalisés.

Chaque tuyau Angular intégré exécute une fonction unique et peut vous aider à transformer les données.

DatePipe

Le DatePipe formate et affiche vos variables de date et d’heure dans un format spécifié, en tenant compte de votre locale. Contrairement à d’autres frameworks qui nécessitent des packages JavaScript pour formater la date et l’heure, Angular utilise la balise DatePipe. Pour utiliser DatePipe dans votre application, ajoutez le symbole de la pipe (|) suivi de date et tout autre paramètre supplémentaire.

Par exemple :

Dans cet exemple, vous passez le paramètre date actuelle par l’intermédiaire de la variable DatePipe qui la formate ensuite selon le format de date par défaut. Vous définissez la variable dateactuelle dans le fichier TypeScript de votre composant.

Voici un exemple :

Vous pouvez également passer des paramètres supplémentaires à la variable DatePipe pour personnaliser la sortie :

Le bloc de code ci-dessus a transmis le shortDate au paramètre DatePipe. Ce paramètre indique au DatePipe de formater la date en utilisant le format court. En plus du shortDate vous pouvez configurer le paramètre DatePipe à l’aide de divers paramètres, notamment z, longDate et des formats de date personnalisés tels que dd/MM/YYY.

UpperCasePipe et LowerCasePipe

Les UpperCasePipe et Tuyau minuscule transforment vos textes. Vous transformez vos textes en majuscules à l’aide de la fonction UpperCasePipe et en minuscules à l’aide de la balise LowerCasePipe.

Pour utiliser le tuyau UpperCasePipe et Tuyau minuscule ajouter le symbole de la pipe (|) suivi de minuscule pour utiliser le Tube minuscule ou majuscules pour utiliser le UpperCasePipe.

Vous trouverez ci-dessous un exemple d’utilisation de la méthode UpperCasePipe et Tuyau minuscule:

Tube à monnaie

En utilisant les CurrencyPipe vous pouvez formater des nombres dans une devise dans votre application. Le CurrencyPipe formate les nombres en fonction de votre langue. Pour formater vos chiffres à l’aide du CurrencyPipe utilisez le symbole de la pipe suivi de monnaie.

Par exemple :

Dans cet exemple, la devise Tuyau de monnaie convertit la variable nombre en devise. Par défaut, le tuyau CurrencyPipe convertit les variables en dollars. Pour changer cela, vous pouvez configurer la fonction CurrencyPipe pour qu’il convertisse les variables en d’autres devises en passant des paramètres supplémentaires.

Voici un exemple :

Ici, vous passez le paramètre GBP au paramètre CurrencyPipe. Cela permet de s’assurer que le paramètre nombre soit convertie en livres sterling.

DecimalPipe et PercentPipe

Les DecimalPipe transforme vos nombres en décimales, tandis que le tuyau PercentPipe convertit vos chiffres en pourcentages.

Pour utiliser la fonction DecimalPipe utilisez le symbole de la pipe suivi de nombre et des paramètres supplémentaires. Pour utiliser le symbole Tube en pourcentage procédez de la même manière, mais remplacez le le nombre par pourcentage sans paramètres supplémentaires.

Par exemple :

Les paramètres supplémentaires transmis à l’option DecimalPipe contrôlent le nombre de chiffres entiers et fractionnaires affichés. Les paramètres 1 spécifie qu’il doit y avoir au moins un chiffre entier. En comparaison, le paramètre 2.3 spécifie qu’il doit y avoir au moins deux et jusqu’à trois chiffres fractionnaires.

JsonPipe

Le paramètre 2.3 spécifie qu’il faut au moins deux et jusqu’à trois chiffres fractionnaires. JsonPipe est un tuyau intégré qui convertit les données dans un format de chaîne JSON. Il est principalement utilisé à des fins de débogage. Vous pouvez utiliser la fonction JsonPipe pour les objets et les tableaux.

La syntaxe d’utilisation de la méthode JsonPipe est la suivante :

Ici, expression est la donnée que vous souhaitez convertir au format JSON. L’opérateur pipe (|) applique l’expression JsonPipe à l’expression.

Par exemple, définissez un objet et un tableau dans votre composant :

Le bloc de code ci-dessus définit un utilisateur et un objet profils . Vous pouvez maintenant utiliser l’objet JsonPipe pour convertir l’objet et le tableau en JSON.

Ici, le JsonPipe convertira le fichier de l’utilisateur et l’objet profils en une chaîne JSON, que vous pouvez rapidement inspecter dans vos modèles pendant le développement ou le débogage.

SlicePipe

Le SlicePipe est très similaire à la méthode JavaScript slice() de JavaScript. La méthode SlicePipe formate des tableaux ou des chaînes en extrayant leurs éléments pour créer de nouveaux tableaux ou chaînes.

Pour utiliser le SlicePipe vous utilisez le symbole de la pipe suivi de tranche et deux paramètres, les indices de début et de fin. L’indice de début est la position dans le tableau ou la chaîne où le pipe commencera à extraire des éléments, et l’indice de fin est la position où le pipe arrêtera d’extraire des éléments.

Voici un exemple d’utilisation de la fonction SlicePipe:

Dans cet exemple, le SlicePipe extrait les deux premiers éléments de l’élément chaîne l’élément à l’indice 0 et l’élément à l’indice 1. En outre, il extrait le premier élément de la variable tableau de la variable . Le tableau SlicePipe est utile lorsque vous souhaitez n’afficher qu’une partie des données dans le modèle.

AsyncPipe

AsyncPipe est un tuyau intégré à Angular qui s’abonne et se désabonne automatiquement à un Observable ou à une Promesse. Il renvoie la dernière valeur émise par l’Observable ou la Promise.

La syntaxe pour l’utilisation de AsyncPipe est la suivante :

Ici, l’expression est l’Observable ou la Promesse à laquelle vous voulez vous abonner.

Par exemple :

Vous pouvez utiliser AsyncPipe pour s’abonner à cet Observable et afficher la dernière valeur émise comme ceci :

Ce bloc de code affichera le dernier nombre émis par l’Observable. AsyncPipe est très utile pour gérer les opérations asynchrones dans vos modèles. Il s’abonne automatiquement à l’Observable ou à la Promise lors de l’initialisation du composant et se désabonne lors de sa destruction.

Enchaîner des Pipes dans Angular

Vous pouvez enchaîner des pipes pour effectuer plusieurs transformations dans une seule expression. Le chaînage de tuyaux est aussi simple que l’utilisation de plusieurs opérateurs de tuyaux (|) dans une seule expression. La sortie de chaque pipe devient l’entrée de la suivante.

Voici la syntaxe de base :

Par exemple, vous pouvez transformer un objet date en une chaîne de caractères à l’aide de l’opérateur DatePipe puis convertir cette chaîne en majuscules à l’aide de la fonction UpperCasePipe.

Créer des applications dynamiques à l’aide de tuyaux

Les pipes sont une fonctionnalité puissante d’Angular qui vous permet de transformer les données avant qu’elles ne s’affichent dans la vue. Ici, vous avez appris à connaître les différents tuyaux intégrés offerts par Angular, tels que DatePipe, CurrencyPipe, UpperCasePipe, etc. Vous avez également appris à les utiliser dans votre application pour créer un contenu plus dynamique. En utilisant les pipes, les développeurs peuvent créer des applications web plus flexibles et dynamiques avec moins de code.