Parfois, les pipes intégrés d’Angular ne suffisent pas. Vous pouvez avoir besoin d’une transformation spécifique à votre application. Dans ce cas, il est possible de créer votre propre pipe personnalisé.

Supposons que vous disposiez d’une liste de tâches, et que chaque tâche puisse être complétée ou non. Pour mettre en valeur les tâches terminées, vous souhaitez ajouter automatiquement un emoji ✅ à leur titre. Plutôt que d’intégrer cette logique dans chaque template, vous pouvez créer un pipe dédié à cet effet.

Création d’un pipe personnalisé

Pour générer un pipe personnalisé dans Angular, utilisez la commande CLI suivante. Nous l’appellerons formatTitle, car il a pour fonction de formater le titre de la tâche selon son état d’achèvement :

Cela va créer deux fichiers :

• format-title.pipe.ts — la logique du pipe ;

• format-title.pipe.spec.ts — un fichier de test unitaire (vous pouvez le supprimer si vous n’avez pas besoin de tests pour le moment).

Lorsque Angular génère le pipe, il ressemble à ceci :

Voici ce que fait ce code :

• La classe FormatTitlePipe implémente PipeTransform, ce qui garantit que le pipe possède une méthode transform ;

• La méthode transform reçoit une valeur (l'entrée) et des arguments optionnels, puis retourne un résultat transformé. À ce stade, elle retourne simplement l'entrée sans modification ;

• Le nom du pipe (formatTitle) est défini dans le décorateur @Pipe — c'est ce nom qui sera utilisé dans le template.

Pour l'instant, le pipe existe mais n'effectue aucune opération. Ajoutons la logique réelle à l'étape suivante.

Implémentation d’un Pipe personnalisé

Nous devons ajouter un emoji ✅ au titre en fonction du statut d’achèvement de la tâche (task.completed). Mettre à jour le pipe pour appliquer notre logique de formatage personnalisée :

La méthode transform prend deux arguments :

• value — le titre de la tâche ;

• completed — un booléen indiquant si la tâche est terminée.

Si la tâche est terminée (true), elle ajoute un emoji ✅ à la fin du titre. Sinon, elle retourne simplement le titre sans modification.

Utilisation du pipe dans un template

Pour utiliser le pipe dans votre template Angular, appliquez-le avec le symbole pipe | :

Explications :

• task.title correspond à la valeur transmise au pipe ;

• formatTitle:task.completed applique le pipe et transmet le paramètre completed ;

• Le titre inclura ou non l’emoji ✅, selon l’état de la tâche.

L’utilisation des pipes de cette manière permet de garder les templates clairs et lisibles, tout en déléguant la logique de formatage à du code réutilisable et testable.