Comment afficher le symbole monétaire à droite dans Angular

J'ai à l'affichage de la monnaie Euro comme ceci : 583 €.

Mais avec ce code:

{{ price | currency:'EUR':true }}

- Je obtenir €583est-il une option dans Angulaire de base pour déplacer le symbole à droite? Beaucoup de pays européens, l'utilisation du symbole à droite (France, Allemagne, Espagne, Italie).

source d'informationauteur Ekaitz Hernandez Troyas

Depuis Angular2 RC6 version vous pouvez définir les paramètres régionaux par défaut directement dans votre application module (fournisseurs):

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

@NgModule({
  providers: [{
      provide: LOCALE_ID,
      useValue: 'de-DE' //'de-DE' for Germany, 'fr-FR' for France ...
    },
  ]
})

Après la devise de la pipe doit ramasser les paramètres régionaux et le symbole à droite:

@Component({
  selector:"my-app",

  template:`
    <h2>Price:<h2>
     {{price|currency:'EUR':true}}
  `
})

7

De change de format du tube est contrôlée par les paramètres régionaux actuels règles. Voir aussi À L'Aide De Tuyaux:
La Date et de la Monnaie tuyaux besoin de l'ECMAScript l'Internationalisation de l'API. Safari et les autres navigateurs plus anciens ne prennent pas en charge. Nous pouvons ajouter la prise en charge avec un polyfill.
```
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
```
Sous le capot CurrencyPipe les délégués de la mise en forme à new Intl.NumberFormat(locale, options).format(num);.

Intl.NumberFormat à l'Aide des options:
```
var number = 123456.789;

//request a currency format
console.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));
//→ 123.456,79 €

//the Japanese yen doesn't use a minor unit
console.log(new Intl.NumberFormat('ja-JP', { style: 'currency', currency: 'JPY' }).format(number));
//→ ￥123,457
```
En d'autres termes, la mise en forme des devises avec CurrencyPipe implique:
1. À l'aide de la bonne localisation. Voir ce comment remplacer les paramètres régionaux par défautmais ce devrait être nécessaire à des fins de test, car les utilisateurs sont tenus de corriger les paramètres régionaux définis dans les paramètres du système d'exploitation.
2. Et à l'aide de la polyfill pour les anciens navigateurs.

Honnêtement, je ne pouvais pas trouver tout intégré façon de le faire.
Donc personnalisés créés tuyau appelé split.

de travail de Démonstration: http://plnkr.co/edit/KX7hfaV2i7CX2VFobM8R?p=preview

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

@Pipe({name:'split'})
export class ShiftPosition implements PipeTransform {
  transform(items: any[], value: string): string {
      return items.substr(1)+' ' +items.substr(0,1);
  }
}


@Component({
  selector:"my-app",

  template:`
    <h2>Dashboard<h2>
     {{price|currency:'EUR':true|split:price}}
  `
})

export class AppComponent{      
  price=10;
}

2

Fournir LOCALE_ID n'était pas une solution parce que mon application est en anglais, mais elle montre la monnaie avec les paramètres régionaux français. Donc, si j'ai mis mon LOCALE_ID à fr-FRtoutes mes dates sont en français, ce qui n'est pas acceptable.

J'ai donc tout simplement de choisir les décimal pipe puis-je ajouter le symbole à la fin.
```
<div>
    {{ document.totalTaxAmount | number:'1.2-2' }} EUR
</div>
```
Le problème ici, si le nombre n'est pas défini, vous allez vous retrouver avec seulement le symbole. Pour résoudre ce problème, j'ai créé une pas de tube vide :
```
@Pipe({
    name: 'notEmpty'
})
export class NotEmptyPipe implements PipeTransform {
    transform(value: any, replaceWith: any = ""): any {
        if (!value) {
            return replaceWith;
        }
        return value;
    }
}
```
Et de l'utiliser comme ceci :
```
<div>
    {{ document.totalTaxAmount | number:'1.2-2' | notEmpty: '0' }} EUR
</div>
```
0

De faire comme ceci:
```
{{price | currency:'EUR':true:'1.0-0'}}
```
Pas besoin d'un surplus de tuyaux, il utilise la devise par défaut de la pipe

Vous devez vous connecter pour publier un commentaire.