Numéro Pipe 101 avec exemples

Les tuyaux angulaires nous permettent de rendre les éléments dans les modèles de composants comme nous le souhaitons. Nous apprendrons trois tuyaux pré-construits pour formater les nombres et comment créer les nôtres.

Les tuyaux angulaires nous permettent de rendre les éléments dans les modèles de composants comme nous le souhaitons.

Angular est livré avec quelques tuyaux intégrés pour nous permettre de formater les données à afficher, y compris certains qui nous permettent de formater les nombres. Nous pouvons également créer nos propres tubes de formatage des nombres.

Dans cet article, nous verrons comment utiliser ces pipes dans nos projets Angular.

Pipes numériques intégrées

Angular est livré avec les tuyaux suivants qui nous permettent de formater les nombres. Ils sont:

• MonnaiePipe
• DécimalPipe
• PourcentPipe

MonnaiePipe

Nous pouvons utiliser le CurrencyPipe pour formater les nombres en valeurs monétaires. Pour l’utiliser, nous utilisons currency dans le modèle.

Par exemple, nous écrivons :

app.component.ts

import { Component } from "@angular/core";

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

app.component.html

<p>{{x | currency}}</p>

formater le nombre x en une valeur monétaire en utilisant la devise des paramètres régionaux définis. Par conséquent, $888.88 est affiché.

Nous pouvons passer plus d’options dans le currency tuyau. Par exemple, nous pouvons écrire :

app.component.html

<p>{{x | currency:'EUR'}}</p>

Alors x s’affiche sous la forme d’une valeur monétaire en euros. Donc, €888.88 est affiché.

Nous pouvons également spécifier le format du symbole monétaire. Par exemple, nous écrivons :

<p>{{x | currency:'EUR':'code'}}</p>

formater x avec le symbole monétaire à trois lettres au lieu du signe monétaire lui-même. Donc, x s’affiche comme EUR888.88.

Nous pouvons spécifier le format avec une chaîne. Pour ce faire, nous écrivons :

<p>{{x | currency:'EUR':'symbol':'4.2-3':'en'}}</p>

La troisième chaîne (4.2-3) spécifie le format de la valeur monétaire affichée.

Dans la chaîne, le premier nombre (4) est le nombre minimum de chiffres entiers. Le deuxième nombre (2) est le nombre minimum de chiffres de fraction. Et le dernier nombre (3) est le nombre maximum de chiffres de fraction.

La quatrième chaîne (en) est la chaîne de paramètres régionaux qui spécifie les paramètres régionaux de la valeur monétaire formatée.

DécimalPipe

Un autre tuyau intégré que nous pouvons utiliser pour formater les nombres est le DecimalPipe. Pour l’utiliser, nous utilisons number sur notre modèle de composant.

Et nous pouvons écrire :

app.component.ts

import { Component } from "@angular/core";

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

app.component.html

<p>{{x | number: '2.0-1'}}</p>

La chaîne qui vient après number spécifie le format du nombre.

Le premier nombre (2) est le nombre minimum de chiffres entiers. Le deuxième nombre (0) est le nombre minimum de chiffres de fraction. Et le dernier nombre (1) est le nombre maximum de chiffres de fraction.

Donc, 888.9 s’affiche car le nombre maximal de chiffres fractionnaires est de 2. Par conséquent, 888,88 est arrondi à 888,9.

PourcentPipe

Nous pouvons formater les valeurs en pourcentage avec le PercentPipe. Pour l’utiliser, nous utilisons percent dans notre modèle.

Nous écrivons:

app.component.ts

import { Component } from "@angular/core";

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

app.component.html

<p>{{x | percent: '2.0-1':'en'}}</p>

La chaîne après percent spécifie le format du nombre.

Le premier nombre (2) est le nombre minimum de chiffres entiers. Le deuxième nombre (0) est le nombre minimum de chiffres de fraction. Et le dernier nombre (1) est le nombre maximum de chiffres de fraction.

La valeur (en) après la chaîne de format est la chaîne de paramètres régionaux.

Par conséquent, nous voyons 88,888.9% affiché puisque nous avons spécifié que la valeur formatée doit avoir un maximum de 1 chiffre décimal.

Canal de numéro personnalisé

Nous pouvons créer facilement notre propre canal de formatage de nombres avec Angular CLI.

Pour créer un nouveau tube et l’enregistrer dans un module angulaire, nous exécutons ng g pipe suivi du nom du tube.

Par exemple, nous exécutons :

ng g pipe CustomNumber

pour créer le CustomNumber tuyau.

Ensuite, nous devrions voir les fichiers suivants créés :

src/app/custom-number.pipe.spec.ts
src/app/custom-number.pipe.ts

Aussi, src/app/app.module.ts est mis à jour afin que le canal soit enregistré.

Dans src/app/app.module.tson obtient quelque chose comme :

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomNumberPipe } from './custom-number.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomNumberPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

On voit ça CustomNumberPipe est dans le declarations propriété de tableau.

Cela signifie que le CustomNumberPipe est enregistré dans AppModule et nous pouvons l’utiliser dans n’importe quel composant du module.

Nous pouvons maintenant ajouter un peu de logique pour formater les nombres à notre façon. Nous pouvons formater facilement les nombres avec le Intl.NumberFormat constructeur intégré dans la plupart des navigateurs modernes.

Dans src/app/custom-number.pipe.tsnous écrivons:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customNumber',
})
export class CustomNumberPipe implements PipeTransform {
  transform(
    value: number|string,
    style: string,
    currency: string,
    locale: string
  ): string {
    const numberFormat = new Intl.NumberFormat(locale, { style, currency });
    return numberFormat.format(Number(value));
  }
}

Chaque classe de tuyau doit avoir le transform méthode. Ça prend value comme premier argument. Et cela peut prendre un certain nombre d’arguments après cela pour nous permettre d’ajuster la façon dont value est formaté. Il doit également renvoyer une chaîne.

Dans celui-ci, nous créons un Intl.NumberFormat exemple avec le locale, style et currency paramètres.

Puis nous appelons format avec l’objet renvoyé par le constructeur pour renvoyer une nouvelle valeur de chaîne que nous obtenons en formatant le value valeur.

Le name La valeur de la propriété est ce que nous utilisons pour référencer le tuyau dans notre modèle.

Ensuite, nous l’utilisons en écrivant :

app.component.html

{{ x | customNumber : "currency" : "JPY" : "ja-JP" }}

Nous passons les arguments dans le même ordre qu’ils sont listés dans la signature du transform méthode. Chaque argument est séparé par deux-points.

Par conséquent, nous voyons que la valeur monétaire formatée qui s’affiche est ￥889.

Conclusion

Les tuyaux nous permettent de restituer les éléments dans les modèles de composants comme nous le souhaitons. Angular est livré avec quelques tuyaux intégrés pour nous permettre de formater les données à afficher.

Nous avons appris trois tubes prédéfinis qui nous permettent de formater des nombres et comment créer nos propres tubes de formatage de nombres.

Nous pouvons utiliser des tubes intégrés si nous voulons simplement formater des nombres rapidement et facilement. Ou nous pouvons créer notre propre tube avec Angular CLI et notre propre code si nous devons formater des nombres d’une manière qui n’est pas disponible avec les tubes intégrés.