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).

Gatefold

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

Retrad

If you are using Angular5, in order for this to work you have to import and register your locale first like import localeDe from '@angular/common/locales/de'; registerLocaleData(localeDe); – Crown

Thanks Nic that worked! A detailed explanation of your Angular5 solution can be found here: #46565472 – Donndonna

The boolean value for "symbol" is marked as deprecated, here from doc: "Boolean (marked deprecated in v5): true for symbol and false for code." – Sisterinlaw

Also add all imports needed : #46419526 import { NgModule, LOCALE_ID } from '@angular/core'; import { registerLocaleData } from '@angular/common'; import localeFr from '@angular/common/locales/fr'; registerLocaleData(localeFr); – Lotty

IMP:- If you used Currency Pipe in your LIbrary's souce code, then you have to registerLocaleData lang in your Library Consuming Project's Module, instead of your LIbrary's Module. – Tamatamable

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 €

Bary

Perfect solution! I would like to add minimumFractionDigits option: new Intl.NumberFormat(this.translateService.currentLang, { style: 'currency', currency: 'EUR', minimumFractionDigits: 0 }).format(type.amount)) – Tocopherol

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.

Jamima

Answer 4

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 €

Shayna

and you can provide: DEFAULT_CURRENCY_CODE and useValue: 'EUR' so you dont specify the currency symbol after the pipe – Assassinate

how to use Currency Pipe with Local in Angular LIbrary? I'm facing issue to use currency pipe with local in my library – Tamatamable

IMP:- If you used Currency Pipe in your LIbrary's souce code, then you have to registerLocaleData lang in your Library Consuming Project's Module, instead of your LIbrary's Module. – Tamatamable

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

Flavorsome

This seems like a bit of a hack. It seems that in the best case, using the locale as in @Maxim's answer is the right way to go since it will be formatted correctly according to the user's preferences. – Facultative

Answer 6

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>

Gibbsite

I would put the EUR inside the transform method. looks good though. – Loment

this is not dynamic at all – Gearing

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

}

Rhododendron

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>

Gearing

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 

Nard

Answer 10

To display currency in an Angular, we can leverage Angular's built-in pipe called currency. It formats a number as currency using the given locale and currency code.

app.module.ts

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

providers: [{provide: LOCALE_ID, useValue: 'en-US'}] //replace 'en-US' with your locale

html

{{ price | currency }}

Knighthead

Answer 11

Do it like this:

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

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

Xyloid