Référence : https://angular.io/guide/pipes
Les "pipes" sont utiles pour transformer des chaînes, des montants de devises, des dates et d'autres données à afficher.
Les "pipes" sont des fonctions simples à utiliser dans les expressions de modèle pour accepter une valeur d'entrée et renvoyer une valeur transformée. Les pipes sont utiles car vous pouvez les utiliser tout au long de votre application, tout en ne déclarant chaque pipe qu'une seule fois. Par exemple, vous utiliseriez une "pipe" pour afficher une date au 15 avril 1988 plutôt que le format de chaîne brute.
Angular fournit des canaux intégrés pour les transformations de données typiques, y compris les transformations pour l'internationalisation (i18n), qui utilisent les informations locales pour formater les données. Les "pipes" intégrées suivants sont couramment utilisés pour le formatage des données :
Pipes | Details |
---|---|
DatePipe |
Formate une valeur de date selon les règles locales. |
UpperCasePipe |
Transforme le texte en majuscules. |
LowerCasePipe |
Transforme le texte en minuscules. |
CurrencyPipe |
Transforme un nombre en une chaîne monétaire, formatée selon les règles locales. |
DecimalPipe |
Transforme un nombre en une chaîne avec un point décimal, formaté selon les règles locales. |
PercentPipe |
Transforme un nombre en une chaîne de pourcentage, formatée selon les règles locales. |
Pipe Custom
Il est également possible de créer ses propres "pipes".
La commande Angular-Cli à utiliser :
ng generate pipe myCustomDate
Vous pourrez vous aider du package date-fns
npm install --save-exact date-fns
Exercice
Mettre en place une nouvelle "pipe" qui affichera en français le nombre de jours, d'heures et de minutes avant une date donnée.