How to display the currency symbol to the right in Angular

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

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 €

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 formatconsole.log(new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(number));// → 123.456,79 €// the Japanese yen doesn't use a minor unitconsole.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.