Dans le cadre de ce cours, je voudrais partager avec vous une dernière catégorie de pipes : ceux qui concernent le formatage des nombres selon les règles de locale de l'application. Il y en a trois :
DecimalPipe – facilite l'affichage de nombres avec des chiffres après la virgule (qui met une virgule plutôt qu'un point, par exemple).
PercentPipe – formate les chiffres en pourcentage.
CurrencyPipe – permet d'afficher des nombres sous forme de monnaie très facilement.
Ce ne sont pas forcément des pipes que vous utiliserez dans cette application précisément, mais il est important de savoir qu'ils existent.
Comptez sur Angular
Pour la démonstration des pipes liés aux nombres, ajoutez simplement un paragraphe contenant un nombre. Il faut que ce nombre soit entre doubles accolades pour que vous puissiez y attribuer un pipe (et aussi pour qu'il soit considéré de type number – sinon ce sera une chaîne de caractères qui contient un nombre !) :
<p>{{ 4346234.36 }}</p>J'ai choisi un nombre à 7 chiffres avant la virgule et 2 chiffres après, pour vous montrer les différences de format selon les différents pipes. Regardez déjà l'affichage sans pipe :
DecimalPipe
Si vous avez modifié la locale de votre application pour la passer en français, regardez ce qui se passe quand vous ajoutez DecimalPipe avec le mot-clé number :
<p>{{ 4346234.36 | number }}</p>
C'est déjà beaucoup mieux ! On peut aussi demander à DecimalPipe d'arrondir pour l'affichage, par exemple à l'entier le plus proche :
<p>{{ 4346234.36 | number: '1.0-0' }}</p>La configuration signifie :
au moins un chiffre pour les entiers ;
minimum 0 chiffres après la virgule – maximum 0 chiffres (Angular arrondira donc à l'entier le plus proche).
Ce qui donne bien :
On peut aussi spécifier d'arrondir à un chiffre après la virgule en spécifiant un chiffre maximum après la virgule :
<p>{{ 4346234.36 | number: '1.0-1' }}</p>
Plus besoin de se prendre la tête avec la fonction Math.round() ! Angular peut afficher les nombres arrondis sans toucher à la donnée sous-jacente.
PercentPipe
Pour transformer des nombres entre 0 et 1 en pourcentage (ex. : 0.4 = 40 %), il suffit d'utiliser PercentPipe :
<p>{{ 0.336 | percent }}</p>
PercentPipe arrondit par défaut les pourcentages à l'entier le plus proche. Vous pouvez cependant le configurer de la même manière que DecimalPipe :
<p>{{ 0.336 | percent: '1.0-1' }}</p>
CurrencyPipe
Quand les nombres dans votre application correspondent à des montants d'argent, CurrencyPipe facilite leur affichage. Si vous utilisez l'affichage par défaut :
<p>{{ 344.36 | currency }}</p>
Angular présume par défaut que vous parlez de dollars, et donc affiche votre montant en dollars selon les règles de la locale de l'application.
Vous pouvez configurer la monnaie à afficher :
<p>{{ 344.36 | currency: 'EUR' }}</p>
Vous pouvez passer un deuxième argument qui permet d'afficher le code de la monnaie plutôt que son symbole. Pour passer un deuxième argument à un pipe, on remet un deux-points : et on passe le deuxième argument :
<p>{{ 344.36 | currency: 'EUR' : 'code' }}</p>
Et voilà ! Vous connaissez tous les outils fournis par Angular pour gérer le format d'affichage des nombres dans vos applications !
En résumé
DecimalPipe (mot-clé
number) vous permet d'afficher un nombre selon les règles de la locale de l'application.PercentPipe affiche un nombre entre 0 et 1 sous forme de pourcentage, arrondi par défaut à l'entier le plus proche.
DecimalPipe et PercentPipe acceptent un argument de configuration sous la forme
'chiffresMinAvantVirgule.chiffresMinAprèsVirgule-chiffresMaxAprèsVirgule'ex. :'1.0-1'CurrencyPipe facilite l'affichage des montants d'argent, et accepte plusieurs arguments de configuration séparés par des deux-points
:
Qu'avez-vous appris dans cette partie du cours ?
Vous avez découvert les pipes – des outils pour gérer le format d'affichage d'une donnée sans modifier la donnée elle-même.
Vous avez changé la casse de vos chaînes de caractères avec UpperCasePipe, LowerCasePipe et TitleCasePipe.
Vous avez modifié l'affichage de la date de création des FaceSnaps avec DatePipe, et vous avez vu les différentes manières de personnaliser l'affichage des dates en passant un argument de configuration à DatePipe.
Vous avez manipulé le format d'affichage des nombres avec DecimalPipe, PercentPipe et CurrencyPipe.
Je vous invite maintenant à faire le quiz avant de passer à la partie suivante, où vous découvrirez les services et le routing !
