How to display the currency symbol to the right in

Question

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 1

Provide LOCALE_ID was not a solution because my application is in english but shows the currency with french locale. So if I set my LOCALE_ID to fr-FR, all my dates are in french, which is not acceptable.

So I simply choose the decimal pipe then I add the symbol at the end.

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

The problem here, if the number is not defined, you will end up with only the symbol. To resolve that issue, I've created a not empty pipe :

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

And use it like this :

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

Answer 2

Do it like this:

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

No need for extra pipes, it uses the default currency pipe

Answer 3

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}}
  `
})

Answer 4

This is working (angular 6) on html side:

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

and on typescript side:

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

123.456,79 €

Answer 5

Currency pipe format is controlled by the current locale rules. See also Using Pipes:

The Date and Currency pipes need the ECMAScript Internationalization API. Safari and other older browsers don't support it. We can add support with a polyfill.

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

Under the hood CurrencyPipe delegates formatting to new Intl.NumberFormat(locale, options).format(num);.

Intl.NumberFormat Using 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

---

In other words, formatting currencies with CurrencyPipe involves:

1. Using the correct locale. See this on how to replace the default locale, but this should be necessary for testing only, because the users are expected to have the correct locale set in the OS settings.
2. And using the polyfill for older browsers.

Answer 6

Honestly, I couldn't find any in-built way to do it. So created custom pipe called split.

working Demo: 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;
}