Créer un Pipe en Angular

Article écrit par Cedrick Guerin

Dans cet article, nous allons découvrir comment créer un Pipe en Angular afin de formater une donnée de manière spécifique.

Qu’est-ce qu’un Pipe ?

Pour ceux qui découvrent Angular, voici un petit rappel avant de passer aux “Custom Pipes”.

Angular contient par défaut des Pipes déjà existants, permettant de formater des données sur notre page. Ces Pipes sont inclus dans le CommonModule fourni par Angular et peuvent donc être utilisés dans n’importe quel module de notre application qui importent le CommonModule.

Voici une petite liste non exhaustive des Pipes par défaut :

DatePipe (pour formater les dates)
UpperCasePipe (pour afficher nos strings en majuscule)
LowerCasePipe (pour afficher nos strings en minuscule)
CurrencyPipe (pour formater les devises monétaires)
AsyncPipe (un peu particulier, il sert à afficher des données provenant d’Observable, et donc asynchrones)

Nous pourrions écrire une fonction qui prend notre data en paramètre, la transforme et nous renvoie la nouvelle valeur, mais les Pipes existent pour faire ce travail bien plus facilement.

Voyons l’exemple pour une date :

<span> {{ date }} </span>

Pas très joli, pas très UI n’est-ce pas ?

C’est là que le Pipe intervient :

<span> {{ date | date: 'dd/MM/yyyy'}} </span>

C’est mieux non ?

Nous avons dit à notre vue que la variable date doit être formatée en utilisant le DatePipe au format dd/MM/yyyy (argument passé après les : ).

Voyons maintenant comment créer notre propre Pipe.

Custom Pipe

Cas d’utilisation

Le type de la donnée que vous souhaitez formater peut être ce que vous voulez (string, array, object, etc.).

Dans la suite de cet article, nous allons créer un Pipe permettant de formater correctement une taille de fichier. Les tailles de fichier sont souvent en octets, ce qui n’est pas très lisible pour un utilisateur. On va donc transformer cette valeur (Exemple : “2120109”) en “2.02Mb”.

Nous avons donc un composant Angular ressemblant à ceci :

export class ExampleComponent {   
   file = { name: 'logo.png', size: 2120109, type: 'image/png' }; 
 }

Et un template HTML affichant la variable size :

<div>
   <p>{{ file.size }}</p>
 </div>

Ceci affichera donc :

Implémentation

Créons un fichier dans notre application nommé filesize.pipe.ts contenant le code suivant :

import { Pipe } from '@angular/core'; 
  
 @Pipe({ name: 'filesize' }) export class FileSizePipe {}

On utilise le décorateur @Pipe et l’on nomme notre pipe “filesize”.

Il faut ensuite, l’ajouter dans les déclarations de l’AppModule de notre application afin de pouvoir l’utiliser partout (ou alors uniquement dans les modules qui nous intéressent).

import { FileSizePipe } from './filesize.pipe';  
@NgModule({   
  declarations: [ 
    FileSizePipe
    ]
 }) 
export class AppModule {}

On peut maintenant modifier notre HTML pour ajouter le pipe :

<div>
   <p>{{ file.size | filesize }}</p>
 </div>

La prochaine étape est de formater la donnée “file.size” car actuellement, notre FileSizePipe ne fait absolument rien. Pour cela, modifiez votre pipe comme ceci :

import { Pipe, PipeTransform } from '@angular/core'; 
  
 @Pipe({ name: 'filesize' })export class FileSizePipe implements PipeTransform {  transform(size: number): string {
    return (size / (1024 * 1024)).toFixed(2) + 'Mb';   
   }
 }

L’interface PipeTransform d’angular nous oblige à surcharger la méthode transform(). Cette méthode va rendre notre Pipe fonctionnel et va transformer la valeur “file.size” en une string concaténant la taille du fichier (converti en Mb) et la string “Mb”.

Le code suivant :

<div>
   <p>{{ file.size | filesize }}</p>
 </div>

affiche donc :

L’inconvénient de ce que nous venons de faire est, que l’unité “Mb” est fixe. Ajoutons un paramètre afin de rendre le Pipe encore plus fonctionnel !

Pipe avec argument

Modifions notre Pipe comme ceci :

import { Pipe, PipeTransform } from '@angular/core'; 
  
 @Pipe({ name: 'filesize' })export class FileSizePipe implements PipeTransform { transform(size: number, ext: string = 'Mb'): string { 
    return (size / (1024 * 1024)).toFixed(2) + ext;
  }
 }

Nous avons rajouté un argument “ext” qui a “Mb” comme valeur par défaut et nous avons modifié la string retournée afin d’utiliser la variable extension.

Le résultat affiché reste inchangé pour le moment, car nous n’avons pas ajouté d’arguments dans notre HTML. Modifions donc cela :

<div>
   <p>{{ file.size | filesize:'megabits' }}</p>
 </div>

Ce qui donne :

Les Pipes peuvent prendre plusieurs arguments, tant qu’ils sont définis dans la méthode transform() et sont appelés à la chaîne dans notre template.

Exemple :

<div>  
   <!-- 1 argument -->
   <p>{{ value | pipe:arg1 }}</p>
 
   <!-- 2 arguments -->
   <p>{{ value | pipe:arg1:arg2 }}</p> 
 
   <!-- 2 arguments sur 3 possibles -->
   <p>{{ value | pipe:arg1::arg3 }}</p>
</div>