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
devient1 250 €
). - uppercase / lowercase : Transforme un texte en majuscules ou minuscules.
- percent : Affiche un nombre au format pourcentage (ex :
0.36
devient36%
). - 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.”