Angular - Les pipes

Qu'est-ce qu'un pipe dans le framework Angular ? Dans cet article, apprenez à vous servir des pipes natifs Angular et créez-en de nouveaux.

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>
Exemple de pipe Angular

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 notre composant.

1
public birthday: Date = new Date(1988, 3, 15);
any.component.ts

Ensuite, dans notre 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>
any.component.html

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 :

http://localhost:4200

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

Les pipes natifs viennent de la librairie @angular/common.

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'
Utilisation de DatePipe

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!'
Utilisation de UpperCasePipe

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!'
Utilisation de LowerCasePipe

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>
Utilisation de CurrencyPipe

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>
Utilisation de DecimalPipe

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>
Utilisation de PercentPipe

Input : Une valeur numérique

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

Pour une liste complète des pipes natifs, référez vous à la documentation Angular : Documentation @angular/common - Les pipes.

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;
    }

}
exponential.pipe.ts

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 notre pipe. À nous 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);
    }
}
exponential.pipe.ts

Utiliser notre 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 nous donne :

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

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>
Exemple de chainage de pipe Angular

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 !

La prochaine étape, quand vous êtes à l'aise avec le concept de pipes : #####################.

Sources