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>