How to display the currency symbol to the right in Angular

Ekaitz Hernandez Troyas picture Ekaitz Hernandez Troyas · Sep 22, 2016 · Viewed 59.4k times · Source

I have to display Euro currency like this : 583 €.

But with this code:

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

I get €583, is there any option in Angular core to move the symbol to right? A lot of european countries use the symbol at the right (France, Germany, Spain, Italy).

Answer

benedikt picture benedikt · Feb 17, 2017

Since Angular2 RC6 version you can set default locale directly in your app module (providers):

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

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

Afterwards the currency pipe should pick up the locale settings and move the symbol to right:

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

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