Parfois, les pipes intégrés d’Angular ne suffisent pas. Vous pouvez avoir besoin d’une transformation unique, 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 terminée ou non. Pour mettre en valeur les tâches terminées, vous souhaitez ajouter automatiquement un emoji ✅ à leurs titres. Plutôt que d’intégrer cette logique dans chaque template, il est préférable de créer un pipe dédié à cet effet.

Comment créer 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 en fonction de son statut 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, cela 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 telle quelle ;

• 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é

Il est nécessaire d’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), un emoji ✅ est ajouté à la fin du titre. Sinon, le titre est retourné 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 est 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 de pipes de cette manière permet de garder vos templates clairs et lisibles, tout en déléguant la logique de formatage à du code réutilisable et testable.