Saltar al contenido

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

Solución:

Desde la versión Angular2 RC6, puede establecer la configuración regional predeterminada directamente en el módulo de su 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 debería recoger la configuración regional y mover el símbolo a la derecha:

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

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

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 €

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

Las canalizaciones de fecha y moneda necesitan la API de internacionalización ECMAScript. Safari y otros navegadores más antiguos no lo admiten. Podemos agregar soporte con un polyfill.

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

Bajo el capó CurrencyPipe delegados formateando a 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 la configuración regional correcta. Vea esto sobre cómo reemplazar la configuración regional predeterminada, pero esto debería ser necesario solo para pruebas, porque se espera que los usuarios tengan la configuración regional correcta establecida en la configuración del sistema operativo.
  2. Y usando el polyfill para navegadores más antiguos.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *