Formater des données avec les pipes

Vous pouvez aller encore plus loin dans l'utilisation des pipes en les configurant. Pour configurer un pipe, passez-lui des options.

Dans cette activité, vous allez manipuler quelques pipes et leurs paramètres.

Pour passer des paramètres à un pipe, utilisez la syntaxe : suivie de la valeur du paramètre. Voici un exemple :

template: `{{ date | date: 'medium' }}`;

Le résultat est Jun 15, 2015, 9:43:11 PM.

Place à la personnalisation de la sortie de quelques pipes :

1. Formater un nombre avec DecimalPipe

   Dans app.ts, mettez à jour le template pour ajouter un paramètre au pipe decimal.

   template: ` ...
   <li>Number with "decimal" {{ num | number: '3.2-2' }}</li>
   `

   Note : C'est quoi, ce format ? Le paramètre du DecimalPipe s'appelle digitsInfo ; il utilise le format : {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

2. Formater une date avec DatePipe

   Mettez maintenant à jour le template pour utiliser le pipe date.

   template: ` ...
   <li>Date with "date" {{ birthday | date: 'medium' }}</li>
   `

   Pour vous amuser un peu plus, essayez différents paramètres pour date. Vous trouverez plus d'informations dans la documentation Angular.

3. Formater une devise avec CurrencyPipe

   Pour votre dernière tâche, mettez à jour le template pour utiliser le pipe currency.

   template: ` ...
   <li>Currency with "currency" {{ cost | currency }}</li>
   `

   Vous pouvez aussi essayer différents paramètres pour currency. Vous trouverez plus d'informations dans la documentation Angular.

Beau travail avec les pipes. Vous avez déjà fait de beaux progrès.

Il existe encore bien d'autres pipes intégrés que vous pouvez utiliser dans vos applications. Vous en trouverez la liste dans la documentation Angular.

Si les pipes intégrés ne couvrent pas vos besoins, vous pouvez aussi créer un pipe personnalisé. Consultez la leçon suivante pour en savoir plus.