19. Utilisation des Pipes intégrés (Date, Currency, Json)
Les Pipes sont un moyen de transformer les données affichées dans le template avant qu'elles ne soient rendues pour l'utilisateur. Ils sont utilisés dans l'interpolation ou d'autres liaisons à l'aide de l'opérateur pipe (|).
Syntaxe
html {{ expression | pipeName : argument1 : argument2 }}
Pipes intégrés courants
1. DatePipe
Formate une valeur de date selon les règles locales.
typescript currentDate: Date = new Date();
html
<p>Date complète : {{ currentDate | date }}</p> <!-- May 20, 2024 --> <p>Date courte : {{ currentDate | date:'shortDate' }}</p> <!-- 5/20/24 --> <p>Format personnalisé : {{ currentDate | date:'dd/MM/yyyy HH:mm' }}</p>2. CurrencyPipe
Formate un nombre sous forme de chaîne monétaire.
typescript productPrice: number = 129.50;
html
<!-- Devise par défaut (USD) --> <p>Prix : {{ productPrice | currency }}</p> <!-- $129.50 --> <!-- Devise personnalisée (EUR), affichage du symbole, format personnalisé --> <p>Prix UE : {{ productPrice | currency:'EUR':'symbol':'1.2-2' }}</p>3. JsonPipe
Utile pour le débogage. Convertit une valeur JavaScript en une chaîne JSON.
typescript userData = { id: 1, status: 'active' };
html
<!-- Affichage de toute la structure de l'objet --> <pre>{{ userData | json }}</pre>4. Autres Pipes
UppercasePipe,LowercasePipeSlicePipe(pour les chaînes ou portions de tableaux)DecimalPipe(formatage de nombres)