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

Date complète : {{ currentDate | date }}

Date courte : {{ currentDate | date:'shortDate' }}

Format personnalisé : {{ currentDate | date:'dd/MM/yyyy HH:mm' }}

2. CurrencyPipe

Formate un nombre sous forme de chaîne monétaire.

typescript productPrice: number = 129.50;

html

Prix : {{ productPrice | currency }}

Prix UE : {{ productPrice | currency:'EUR':'symbol':'1.2-2' }}

3. JsonPipe

Utile pour le débogage. Convertit une valeur JavaScript en une chaîne JSON.

typescript userData = { id: 1, status: 'active' };

html

{{ userData | json }}

4. Autres Pipes

• UppercasePipe, LowercasePipe
• SlicePipe (pour les chaînes ou portions de tableaux)
• DecimalPipe (formatage de nombres)