Les pipes dans Angular sont des petits outils qui transforment l’affichage des données dans les templates HTML, sans changer la donnée elle-même dans le code. Ils servent à formater ou transformer rapidement et facilement ce qui est affiché à l’utilisateur.


Fonctionnement d’un pipe

  • Principe : On écrit la donnée d’origine (nombre, texte, date…) dans le HTML et, grâce au pipe, on modifie son apparence ou sa forme au moment de l’affichage.
  • Syntaxe : Les pipes sont utilisés avec le caractère | (barre verticale) dans le template. Par exemple : xml<p>{{ price | currency:'EUR' }}</p> <p>{{ birthday | date:'longDate' }}</p>

Exemples de pipes intégrés (fournis par Angular)

  • date : Formate une date (ex : 2025-08-12 devient « 12 août 2025 » selon la langue).
  • currency : Affiche un nombre sous forme de monnaie (ex : 1250 devient 1 250 €).
  • uppercase / lowercase : Transforme un texte en majuscules ou minuscules.
  • percent : Affiche un nombre au format pourcentage (ex : 0.36 devient 36%).
  • json : Affiche des objets ou tableaux sous forme de chaîne au format JSON lisible.
  • slice : Coupe un tableau ou une chaîne, n’en montrant qu’une partie (ex : pour limiter le nombre d’éléments affichés).

Pourquoi utiliser les pipes ?

  • Clarté et simplicité : Transformer l’affichage se fait directement dans le HTML, le code TypeScript reste propre.
  • Réutilisabilité : Un même pipe peut s’utiliser à plusieurs endroits, pour des formats homogènes dans toute l’application.
  • Extensibilité : On peut créer ses propres pipes pour répondre à des besoins particuliers (ex : transformer une température en °C/°F, formater un numéro, cacher des caractères…).

Exemple de pipe personnalisé

Suppose qu’on veut afficher un texte à l’envers :

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'reverse'})
export class ReversePipe implements PipeTransform {
transform(value: string): string {
return value.split('').reverse().join('');
}
}

Utilisation dans le template :

<p>{{ 'Angular' | reverse }}</p> <!-- Affiche : ralugnA -->

Résumé vulgarisé

Les pipes sont comme des “mini-filtre magiques” qu’on pose sur une donnée dans le HTML :

  • Tu veux une date qui s’affiche joliment ? Pipe date.
  • Une somme en euros ? Pipe currency.
  • Un mot tout en majuscules ? Pipe uppercase.
  • Un truc spécial à toi ? Crée ton propre pipe !

Ils rendent l’affichage des données plus propre, lisible et personnalisable, sans bidouiller la logique du code.

“Ces notes techniques sont à but informatif, non formatif, et reflètent mon expérience à la date de rédaction.”