Formater l’affichage des données dans Angular

Formater l’affichage des nombres, des dates et des chaines de caractères est assez simple dans Angular. Il vous suffit d’utiliser les PIPE et c’est ce que nous allons voir ici.

Qu’est-ce qu’un PIPE ?

Un pipe est une classe contenant une méthode qui permet de transformer, de formater l’affichage d’une données.

L’affichage des données type script dans le template Html se fait via la string interpolation {{ variable }}. L’utilisation d’un pipe se fait comme ceci : {{ variable | pipe }}. Ainsi, notre variable est transformée par le pipe.

Les PIPE pour les chaînes de caractères

Les plus simples sont les PIPE pour les chaînes de caractères. On a par exemple le pipe “uppercase” ou “lowercase”. Ainsi, imaginons une variable type script “firstname”. Supposons un projet hello-world de base et cette variable type script “firstname” directement dans app pour faire simple. On aura donc un app.component.ts comme suit :

...
export class ... {
  firstname = '';
  ...
}

Maintenant, rendez-vous dans notre template Html. Si on veut afficher notre “firstname”, on va simpleme avoir ceci dans app.component.html :

<p>{{firstname}}</p>

Si on veut afficher notre “firstname” en majuscules, on va utiliser le PIPE “uppercase” comme ceci :

<p>{{ firstname | uppercase }}</p>

Si on veut afficher notre “firstname” en minuscules, on va utiliser le PIPE “lowercase” comme ceci :

<p>{{ firstname | lowercase }}</p>

Les PIPE pour les nombres

Il existe également des PIPE pour formater l’affiche des nombres. En effet, on pourrait vouloir afficher un nombre avec un certain nombre de décimales, avec un certain séparateur de décimales, etc. Voici quelques exemples :

Imaginons un nombre “weight” dans notre composant app. On aurait donc ceci dans app.component.ts :

...
export class ... {
  weight = 80.25;
  ...
}

Imaginons que nous souhaitions afficher le nombre sans décimales. Rien de plus simple avec le PIPE “number”. Voici ce à quoi ressemblera notre app.component.html :

<p>{{ weight | number:'1.0-0' }}</p>

Si on regarde, on a plusieurs infos :

• Notre PIPE “number” suivi de “:” et donc d’un paramètre :
• 1.0-0 ->
  • le premier nombre indique le nombre minimum de chiffres avant la virgule. Ici on sait que même si on descend en dessous de 1, on affichera un “0” car on demande minimum un chiffre avant la virgule. On pourrait forcer de compléter le nombre avec des 0 pour avoir par exemple un minimum de 3 chiffres avant la virgule. Je vous laisse faire vos tests vous-mêmes pour découvrir ce que cela donnera.
  • le second nombre juste après le “.” indique le nombre minimum de décimales à afficher. Dans notre cas, on n’en veut pas du tout donc “0”.
  • le troisième nombre après le “-” indique le nombre maximum de décimales à afficher. Dans notre cas, on n’en veut pas du tout donc “0” aussi ici.

Il existe un second paramètre qui est la localisation “french”, etc. pour indiquer quel séparateur utiliser etc. Pour passer un second paramètre à un PIPE, il suffit de rajouter de nouveau “:”. Imaginons donc qu’on veuille afficher une seule décimale maximum avec la config “fr”, on aura ceci :

<p>{{ weight | number:'1.0-1':'fr' }}</p>

Vous pouvez voir qu’on a ajouté de nouveau “:” pour passer un autre paramètre et on lui indique qu’on veut utiliser la localisation “fr”.

ATTENTION : Angular vous dira surement qu’il vous manque de quoi utilise la “locale” “fr”. En effet, il faut lui fournir les imports nécessaires. Rendez-vous dans app.modules.ts :

...
import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr);

@NgModule({
  ...,
  providers: [
    { provide: LOCALE_ID, useValue: 'fr-FR'},
  ]
})

A présent, vous pourrez utiliser la locale “fr” sans soucis 😉

Prochain article

Dans un prochain article, vous découvrirez comment formater l’affichage des dates à l’aide des PIPES. Alors n’oubliez pas de vous abonner à ce blog pour ne rien manquer et n’hésitez pas non plus à me dire en commentaire ce que vous avez appréciez ou ce dont vous aimeriez parler un peu plus. Vous pouvez également partager et liker mes articles.

Voilà, j’espère que cet article vous aura plu et vous aura été utile. Je vous dis à très bientôt sur le blog développement-web-facile.com.