How to display the currency symbol to the right in Angular

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

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 2

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 3

I was looking to this answer, and the current version of angular it is possible to define providers for localization and Default currency code.

Like this.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, LOCALE_ID, DEFAULT_CURRENCY_CODE } from '@angular/core';

import localePt from '@angular/common/locales/pt';
import { registerLocaleData } from '@angular/common';

// Register the localization
registerLocaleData(localePt, 'pt-BR');

@NgModule({
  declarations: [
    AppComponent,
    NotificationListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
  ],
  providers: [
    {
      provide: LOCALE_ID,
      useValue: 'pt-BR'
     },
     {
       provide: DEFAULT_CURRENCY_CODE,
       useValue: 'BRL'
     },
    DataService,
    NotificationsService,
    GeoLocationService,
  ],
  entryComponents: components,
})

Once done, the utilization is very simple:

<div class="col-12" *ngIf="isContentInsurance.value">
     <h5 class="pull-left">Gst</h5>
     <span class="pull-right">-{{offers.contentInsurance | currency}}</span>
</div>

It is not necessary to create any custom pipeline or different custom action.

Answer 4

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 5

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;
}

Answer 6

For Angular12 you should import this in your module

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import localeDeExtra from '@angular/common/locales/extra/de';

registerLocaleData(localeDe, 'de-DE', localeDeExtra);

And in your providers section

{
      provide: LOCALE_ID,
      useValue: 'de-DE'
}

You can use like this

{{ price | currency:'EUR'}}

The result will be like this

    139,00 €

Answer 7

I just didn't want to use 'fr' local, So :

import { PipeTransform} from '@angular/core';
import { Pipe } from '@angular/core';
import {CurrencyPipe} from '@angular/common';

    @Pipe({ name: 'myCurrency' })
    export class MyCurrencyPipe extends CurrencyPipe implements PipeTransform {
    
      transform(value: any, currencyCode?: string, display?: 'code' | 'symbol' | 'symbol-narrow' | string | boolean, digitsInfo?: string, locale?: string): string | null {
         let result = super.transform(value, currencyCode, display, digitsInfo, locale);
         if (result.charAt(0)==='?' || result.charAt(0)==='$' ){
           result = result.substr(1)+' ' +result.substr(0,1);
         }else if(result.substr(0,3)==="TJS" || result.substr(0,3)==="RUB"){
           result = result.substr(3) +" "+result.substr(0,3)
         }
         if ( Number(value) >0 ){
           result = "+ "+ result
         }else{
           result = "- "+ result
         }
         return result;
      }

}

Answer 8

I created my own pipe to do this, also this is generalized also, it will automatically change the currency if the value in order.currency is different, unlike the hardcoded Currency

currency.pipe.ts

import { CurrencyPipe, getCurrencySymbol } from "@angular/common";
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({name:'OmsCurrency'})
export class OmsCurrency implements PipeTransform {
  constructor() { }
  transform(value: string, curr: string): string {
    try {
      if (curr === "" || curr === null) {
        return value
      }
      else {
        return value + ' ' + getCurrencySymbol(curr,"narrow");
      }
    } catch (error) {
      return value + ' ' + curr;
    }

  }
}

and in the html file just added the pipe

<div class="col-1 h5 text-right">
    {{( item.unitPrice ? item.unitPrice : "0.00" ) |  OmsCurrency: order.currency }}
</div>

Answer 9

Well, I fix this problem for myself like the below

{{ product.price | currency: product.currency:"":".2-2" }} {{ orderInfo?.currency }}

Btw if I set if values of pipe in a normal way the output would be

{{ product.price | currency: product.currency:"symbol":".2-2" }}

TRY 45,666.00

But after customizing the pipe inputs the output is

{{ product.price | currency: product.currency:"":".2-2" }} {{ orderInfo?.currency }}

45,666.00 TRY