• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 01/07/2024

Formatez les chiffres

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 :

Un nombre sans formatage est affiché sans espaces et la virgule est en fait un point !
Sans formatage

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>
Le nombre a des espaces après les millions et après les milliers, et la virgule est maintenant une virgule !
DecimalPipe par défaut

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 :

Le nombre apparaît correctement arrondi
Arrondi à l'entier le plus proche

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>
Le ,36 passe bien en ,4 après arrondi
Arrondi à un chiffre après la virgule

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>
Pour 0.336, Angular nous affiche 34 %
En pourcentage, déjà arrondi ?

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>
Angular nous affiche bien 33,6 %
En pourcentage avec un chiffre après la virgule

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>
Le nombre est affiché en $US
En dollars

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>
Le montant est affiché en euros, €
En euros, €

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>
Le montant est affiché suivi de EUR plutôt que le symbole €
En euros avec le code EUR

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 !

Et si vous obteniez un diplôme OpenClassrooms ?
  • Formations jusqu’à 100 % financées
  • Date de début flexible
  • Projets professionnalisants
  • Mentorat individuel
Trouvez la formation et le financement faits pour vous
Exemple de certificat de réussite
Exemple de certificat de réussite