Tuyaux intégrés en angulaire

De Get Docs
Aller à :navigation, rechercher

Les tuyaux dans Angular vous offrent un moyen simple de transformer des données directement dans vos modèles. Vous pouvez créer vos propres tuyaux personnalisés, et vous pouvez également utiliser l'un des suivants, qui font partie du CommonModule et sont disponibles dès la sortie de la boîte :

Ce message couvre Angular 2 et plus


Asynchrone

Le tube Async s'abonne automatiquement à un Observable ou à une Promise et renvoie les valeurs émises au fur et à mesure :

<ul>
  <li *ngFor="let item of data | async">
    {{ item.name }}
  </li>
</ul>

Monnaie

Le tube Currency permet de formater des nombres dans différentes devises :

{{ price | currency:'CAD' }}
{{ price | currency:'USD':true }}
{{ price | currency:'EUR':false:3.2-2 }}
  • Le premier argument est une chaîne avec le code de devise locale.
  • Le deuxième argument possible est un booléen pour afficher le qui affichera soit le symbole de la devise, soit le code de la devise. La valeur par défaut est false et affiche le code de devise.
  • Le troisième possible est une chaîne au format du tube décimal pour formater le nombre.

Date

Formatez les valeurs de date avec le tube Date :

{{ someDate | date:'medium' }}
{{ someDate | date:'fullDate' }}
{{ someDate | date:'yy' }}
{{ someDate | date:'Hm' }}

Vous pouvez utiliser un certain nombre de symboles pour définir un format personnalisé, ou vous pouvez également utiliser un certain nombre de mots-clés prédéfinis. Les mots clés disponibles sont les suivants : 'medium', 'short', 'fullDate', 'longDate', 'mediumDate', 'shortDate', 'mediumTime' et 'shortTime'.

Voir la référence officielle API pour une liste de symboles.

Décimal

Le tube Decimal formate les valeurs décimales :

{{ decimalValue | number:'4.3-5' }}

Dans l'exemple ci-dessus ('4.3-5'), 4 est pour le nombre minimum de chiffres entiers, 3 est pour le nombre minimum de chiffres de fraction et 5 est pour le nombre maximum de chiffres de fraction.

Json

Le tube Json est utile pour le débogage et affiche un objet sous forme de chaîne Json. Il utilise JSON.stringify dans les coulisses :

{{ someObject | json }}

Minuscule majuscule

Texte caché en minuscules ou en majuscules avec le tuyau respectif :

{{ user.name | uppercase }}
{{ user.name | lowercase }}

Pour cent

Le tube Percent transforme un nombre en sa valeur en pourcentage :

{{ decimalValue | percent }}
{{ decimalValue | percent:'3.2-3' }}

L'argument facultatif est une chaîne au format de tube décimal.

Tranche

Créez une liste ou une chaîne de sous-ensembles avec le tube Slice :

{{ someText | slice:3:6 }}
<ul>
  <li *ngFor="let item of someList | slice:2">
    {{ item }}
  </li>
</ul>

Les arguments sont l'index de début et l'index de fin. L'index de fin peut être omis et la liste ou la chaîne résultante contiendra tout, de l'index de début à la fin.

👉 Il existe également 2 autres tubes intégrés qui sont actuellement au stade expérimental : I18nPlural et I18nSelect.