Comment utiliser le pipe number sur Angular ?

Pensez à importer CommonModule

Vous devez importer le module CommonModule dans votre module principal en ajoutant l'instruction suivante à la liste des imports de votre module :

import { CommonModule } from '@angular/common';

@NgModule({
  imports: [
    CommonModule
  ],
  // ...
})
export class MyModule { }

Le pipe number dans Angular permet de formater un nombre en fonction de différents paramètres tels que la décimale, la notation scientifique, etc.

Voici comment l'utiliser :

1. Dans votre template HTML, vous pouvez utiliser le pipe number comme suit :

{{ number | number: '2.1-3' }}

Cela formatera le nombre en utilisant le format spécifié (ici, 2 chiffres avant la virgule et 1 à 3 chiffres après la virgule).

Dans TypeScript

2. Vous pouvez également utiliser le pipe number dans votre code TypeScript en le transformant en une fonction. Par exemple :

import { Component } from '@angular/core';
import { DecimalPipe } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  number = 123456.789;

  constructor(private decimalPipe: DecimalPipe) {}

  formatNumber(): string {
    return this.decimalPipe.transform(this.number, '2.1-3');
  }
}

Dans ce code, la méthode formatNumber utilise le pipe number pour formater le nombre number en utilisant le format spécifié. Vous pouvez ensuite utiliser cette méthode dans votre template HTML comme ceci :

{{ formatNumber() }}

Paramètres du pipe number

Le pipe number d'Angular permet de formater un nombre en fonction de différents paramètres. Ces paramètres sont spécifiés sous forme de chaîne de caractères lors de l'utilisation du pipe.

Voici les principaux paramètres disponibles :

• minInt : le nombre minimum de chiffres avant la virgule. Si le nombre de chiffres est inférieur, il sera complété par des zéros. Par exemple, si minInt vaut 3 et que le nombre à formater est 12, il sera affiché sous la forme "012".

• minFraction : le nombre minimum de chiffres après la virgule. Si le nombre de chiffres est inférieur, il sera complété par des zéros. Par exemple, si minFraction vaut 2 et que le nombre à formater est 12.3, il sera affiché sous la forme "12.30".

• maxFraction : le nombre maximum de chiffres après la virgule. Si le nombre de chiffres est supérieur, il sera arrondi. Par exemple, si maxFraction vaut 2 et que le nombre à formater est 12.345, il sera affiché sous la forme "12.35".

• digitInfo : permet de spécifier minInt, minFraction et maxFraction en même temps, sous la forme "minInt.minFraction-maxFraction". Par exemple, pour spécifier 3 chiffres avant la virgule, 2 chiffres minimum après la virgule et 3 chiffres maximum après la virgule, vous pouvez utiliser la chaîne "3.2-3".

Voici quelques exemples d'utilisation du pipe number avec différents paramètres :

{{ number | number: '2.1-3' }} // Affiche 2 chiffres avant la virgule, 1 à 3 chiffres après la virgule
{{ number | number: '3.2' }} // Affiche 3 chiffres avant la virgule, 2 chiffres après la virgule

Définir la langue

Le pipe number d'Angular accepte en effet deux paramètres : le premier est la chaîne de formatage du nombre, tandis que le second est une chaîne de caractères indiquant la locale à utiliser pour le formatage.

La locale définit le format de la date et des nombres utilisé dans un pays ou une région donnée. Elle peut être spécifiée sous forme de code ISO 639 (par exemple, "en" pour l'anglais, "fr" pour le français, etc.).

Voici un exemple d'utilisation du pipe number avec la locale spécifiée :

{{ number | number: '2.1-3': 'fr' }} // Affiche le nombre en utilisant le format français (par exemple, avec une virgule comme séparateur décimal)

Si vous ne spécifiez pas de locale, le pipe utilisera la locale par défaut de l'application. Vous pouvez définir la locale par défaut en utilisant le paramètre LOCALE_ID lors de la configuration de votre module d'application :

import { LOCALE_ID, NgModule } from '@angular/core';

@NgModule({
  providers: [{ provide: LOCALE_ID, useValue: 'fr' }]
})
export class AppModule {}