navigationend - Cómo mostrar el símbolo de moneda a la derecha en Angular

title angular

Question

Tengo que mostrar la moneda en euros como esta: 583 € .

Pero con este código:

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

Obtengo €583 , ¿hay alguna opción en el núcleo angular para mover el símbolo a la derecha? Muchos países europeos utilizan el símbolo de la derecha (Francia, Alemania, España, Italia).

Answer 1

Desde la versión Angular2 RC6, puede establecer la configuración regional predeterminada directamente en su módulo de aplicación (proveedores):

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

Luego, la tubería de moneda debe seleccionar la configuración regional y mover el símbolo a la derecha:

@Component({
selector:"my-app",
template:`
<h2>Price:<h2>
{{price|currency:''EUR'':true}}
`
})

Answer 2

El formato de canalización de moneda está controlado por las reglas de configuración regional actuales . Véase también Uso de tuberías :

Las tuberías de fecha y moneda necesitan la API de internacionalización de ECMAScript. Safari y otros navegadores antiguos no lo admiten. Podemos añadir soporte con un polyfill.

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

Bajo el capó, CurrencyPipe delega el formato al new Intl.NumberFormat(locale, options).format(num); .

Intl.NumberFormat usando opciones :

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 otras palabras, formatear monedas con CurrencyPipe implica:

1. Usando el local correcto. Vea esto sobre cómo reemplazar la configuración regional predeterminada , pero esto debería ser necesario solo para pruebas, ya que se espera que los usuarios tengan la configuración regional correcta en la configuración del sistema operativo.
2. Y utilizando el polyfill para navegadores más antiguos.

Answer 3

Esto está funcionando (angular 6) en el lado html:

{{ amount | currency: ''EUR'':''symbol'':undefined:''fr-FR'' }}

y en el lado mecanografiado:

const number = 123456.789;
console.log(new Intl.NumberFormat(''fr-FR'', { style: ''currency'', currency: ''EUR'' }).format(number));

123.456,79 €

Answer 4

Hazlo asi:

{{price | currency:''EUR'':true:''1.0-0''}}

No hay necesidad de tuberías adicionales, utiliza la tubería de moneda predeterminada

Answer 5

Honestamente, no pude encontrar ninguna forma integrada de hacerlo. Así creado tubo personalizado llamado split .

Demostración de trabajo: 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;
}

Answer 6

Proporcionar LOCALE_ID no fue una solución porque mi aplicación está en inglés pero muestra la moneda con la configuración regional francesa. Entonces, si configuro mi LOCALE_ID en fr-FR , todas mis fechas están en francés, lo cual no es aceptable.

Así que simplemente elijo el tubo decimal y luego agrego el símbolo al final.

<div>
{{ document.totalTaxAmount | number:''1.2-2'' }} EUR
</div>

El problema aquí, si el número no está definido, terminará solo con el símbolo. Para resolver ese problema, he creado una tubería no vacía:

@Pipe({
name: ''notEmpty''
})
export class NotEmptyPipe implements PipeTransform {
transform(value: any, replaceWith: any = ""): any {
if (!value) {
return replaceWith;
}
return value;
}
}

Y úsalo así:

<div>
{{ document.totalTaxAmount | number:''1.2-2'' | notEmpty: ''0'' }} EUR
</div>