Un pipe c'est quoi ?

Le pipe est un moyen d’appliquer des transformations sur nos données, directement depuis le template HTML.

1
<p> Date de réception : {{ receptionDate | date | uppercase }} </p>

En terme de concept

Un pipe est défini par :

• une donnée en entrée (paramètre)
• une donnée en sortie (valeur de retour)
• une fonction de transformation (mapping)

Et optionellement, on peut envoyer un paramètre en plus de la valeur d'input.

Dans Angular, on distingue 2 types de pipes : les pipes natifs - venant des librairies Angular - et les pipes custom que vous codez vous-même.

En terme de code

Prenons pour exemple le pipe date natif dans Angular :

On commence par déclarer une variable birthday dans le fichier TypeScript de votre composant.

1
public birthday: Date = new Date(1988, 3, 15);

Ensuite, dans votre HTML on souhaite l'afficher dans un format user-friendly et lisible.

1
<p>La date de naissance du héros est {{ birthday | date: 'mediumDate' }}</p>

Dans cet exemple, le pipe DatePipe prend en entrée la valeur birthday et le paramètre 'mediumDate'. Notez bien que pour passer un paramètre, on utilise des ":". Si le pipe accepte plusieurs paramètres, on peut les lui passer en séparant les paramètres entre eux par des ":" aussi.

Finalement, on obtient en sortie :

Les 2 types de pipe

Pour la plupart des besoins, un pipe natif est déjà codé dans une librairie Angular. Mais dans certains cas, il faut le coder soi-même !

Les pipes natifs Angular

Voyons ensemble les pipes natifs les plus courants.

DatePipe

Le DatePipe sert à formater une date.

Utilisez-le avec un des formats prédéfinis ou selon une "format-string" que vous pouvez définir. Par défaut, le format est 'mediumDate'.

1
2
3
4
{{ dateObj | date }}               // output is 'Jun 15, 2015'
{{ dateObj | date:'medium' }}      // output is 'Jun 15, 2015, 9:43:11 PM'
{{ dateObj | date:'shortTime' }}   // output is '9:43 PM'
{{ dateObj | date:'mm:ss' }}       // output is '43:11'

Input : Un objet JS Date

Output : Une chaîne de caractères formatée

UpperCasePipe

Le UpperCasePipe sert à passer un texte en majuscule.

1
{{ 'hello world!' | uppercase }}     // output is 'HELLO WORLD!'

Input : Une chaîne de caractères

Output : Une chaîne de caractères en majuscules

LowerCasePipe

Le LowerCasePipe sert à passer un texte en minuscule.

1
{{ 'HELLO WORLD!' | lowercase }}     // output is 'hello world!'

Input : Une chaîne de caractères

Output : Une chaîne de caractères en minuscules

CurrencyPipe

Le CurrencyPipe sert à formater un nombre en écriture monétaire.

1
2
3
4
5
<!--output '$0.26'-->
<p>Amount: {{amount | currency}}</p>

<!--output 'CA$0.26'-->
<p>Amount: {{amount | currency:'CAD'}}</p>

Input : Une valeur numérique

Output : Une chaîne de caractères formatée pour afficher un montant

DecimalPipe

Le DecimalPipe sert à formater un nombre en écriture décimale.

1
2
3
4
5
6
7
8
9
10
11
<!--output '2.718'-->
<p>e (no formatting): {{e | number}}</p>

<!--output '002.71828'-->
<p>e (3.1-5): {{e | number:'3.1-5'}}</p>

<!--output '0,002.71828'-->
<p>e (4.5-5): {{e | number:'4.5-5'}}</p>

<!--output '0 002,71828'-->
<p>e (french): {{e | number:'4.5-5':'fr'}}</p>

Input : Une valeur numérique

Output : Une chaîne de caractères qui représente un nombre avec une virgule décimale

PercentPipe

Le PercentPipe sert à formater un nombre en pourcentage.

1
2
3
4
5
<!--output '26%'-->
<p>A: {{a | percent}}</p>

<!--output '0,134.950%'-->
<p>B: {{b | percent:'4.3-5'}}</p>

Input : Une valeur numérique

Output : Une chaîne de caractères qui représente le nombre en pourcentage

Liste complète des pipes natifs

Vous trouverez une liste exhaustive des pipes natifs d'Angular, en cliquant sur ce lien : Liste pipes natifs Angular

Créer son propre pipe

Il est tout à fait possible et même recommandé de créer sa propre petite armada de pipes. Prenons comme exemple un pipe de calcul d'exponentielle, qui prend en entrée : une valeur numérique et un exposant.

Générer un pipe avec le CLI Angular

Entrez simplement la commande suivante à la racine de votre projet :

ng generate pipe exponential

ou alors

ng g p exponential

Ca devrait vous générer un composant semblable à celui-ci :

1
2
3
4
5
6
7
8
9
10
11
12
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
name: 'exponential'
})
export class ExponentialPipe implements PipeTransform {

    transform(value: unknown, ...args: unknown[]): unknown {
        return null;
    }

}

Coder la transformation des données (mapping)

Dans le code du pipe généré par le CLI, remarquez la présence d'une méthode transform() qui prend en entrée une valeur, value, et un tableau de paramètres ...args.

Cette méthode vient de l'interface PipeTransform qui est implémentée par votre pipe. À vous alors d'implémenter cette méthode !

Dans nôtre cas, on ne s'attend à recevoir qu'un paramètre : l'exposant. On peut donc remplacer le spread operator ... par une simple variable exponent typée en number.

La valeur en entrée du pipe et la valeur de retour seront de type number également.

1
2
3
4
5
6
7
8
import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'exponential'})
export class ExponentialPipe implements PipeTransform {
    transform(value: number, exponent?: number): number {
        return Math.pow(value, isNaN(exponent) ? 1 : exponent);
    }
}

Utiliser votre nouveau pipe

Pour appeler votre nouveau pipe, placez-vous dans votre fichier HTML, à l'intérieur d'une interpolation (les doubles accolades {{}}) et inscrivez-y :

• Une valeur numérique
• Le symbole |
• Le nom de votre pipe : exponential
• Le symbole :
• La valeur de l'exposant à calculer

Ce qui vous donne :

1
2
<h2>2 exponentiel 10</h2>
<p>Résultat: {{2 | exponential: 10}}</p>

Comment chainer les pipes ?

Etant donné qu'ils ont tous une valeur d'entrée et de sortie, il est possible de chainer les pipes.

1
<p> Date de réception : {{ receptionDate | date | uppercase }} </p>

Dans cet exemple, le DatePipe est appelé en premier et transforme la date en string. On fait ensuite appel au pipe UpperCasePipe, pour passer cette string en majuscule.

Vous pouvez en chainer autant que vous le souhaitez à condition que les types d'entrée et de sortie soient compatibles.

Vous savez tout. Il ne vous reste plus qu'à essayer par vous même.

Bon code !

Sources

• Les pipes natifs Angular : Documentation @angular/common
• Guide Angular - Les pipes : Transforming Data Using Pipes