Angular Currency Pipe & Formatting Currency In Angular

Learn how to format currencies in Angular using Angular currency Pipe

Angular Currency Pipe

Angular Currency Pipe is one of the bulit in pipe in Angular used to format currency value according to given country code,currency,decimal,locale information.

Table of Contents

Angular Currency Pipe Syntax

Angular Currency Pipe takes currency value as input and currencyCode,display,digitsInfo and locale as parameters as shown below

{{currency_value|currency[:currencyCode[:display[:digitsInfo[:locale]]]]}}
ParameterDescription
currencyCodeISO 4217 currency code.Of type string default value undefined,Optional
displayWe can display Currency 'symbol' or 'code' or 'symbol-narrow' or our own string.Of type string, Optional Default value is 'symbol'
digitsInfoRepresents Decimal representation of currency value.Of type string default value undefined,Optional
localerepresents locale format rules. Default value is our project locale if set or undefined.Optional

Angular Currency Pipe example

We will go through few examples to understand Angular Currency Pipe.For example we have Currency of Value 100.23.

<!--output '$100.23'-->
<p>{{Value | currency}}</p>

<!--output '₹100.23'-->
<p>{{Value | currency:'INR'}}</p>

If you are not passing any parameters then it displays the default currency as USD i.e., dollors.

We can change this default currency as explained below.

If we are passing currency code to the angular currency pipe.It will display the corresponding default currency symbol.

I am passing currency code as “INR” and Rupee symbol will be displayed.

Angular Currency Pipe without symbol

If you want to display your own name instead of default currency symbol you have to pass display parameter.

The display parameter can be “code” (currencycode will be displayed) or “symbol” or “symbol-narrow” or any other custom value.

<!--output 'INR100.23'-->
<p>{{Value | currency:'INR':'code'}}</p>

<!--output 'CA$100.23'-->
<p>{{Value | currency:'CAD':'symbol'}}</p>

<!--output '$100.23'-->
<p>{{Value |currency:'CAD':'symbol-narrow'}}</p>

<!--output '₹100.23'-->
<p>{{Value |currency:'INR':'symbol-narrow'}}</p>

<!--output 'Indian Rupee100.23'-->
<p>{{Value | currency:'INR':'Indian Rupee'}}</p>

Few countries like Canada have two currency codes like symbol CA$ and symbol-narrow $. If the country locale does not have symbol-narrow, default symbol will be displayed.

Indian rupee does not have symbol-narrow so the default rupee symbol displayed.

If you want to display your own custom name as symbol you can pass as a paramter as shown in last example.I am passing ‘Indian Rupee’ as display parameter.

Angular Currency Pipe No Decimal

If you want to customize the decimal points of currency value. You need to pass digitInfo parameter.

The syntax of the digitInfo parameter is “numberOfInteger:minimumFractions-maxFractions”.

<!--output '₹0,100.35'-->
<p>{{Value |currency:'INR':'symbol':'4.2-2'}}</p>

<!--output '₹100.2'-->
<p>{{Value |currency:'INR':'symbol':'3.1-1'}}</p>

The first example displayed as “₹0,100.35” because we are telling the currency pipe to display at least 4 digits. Remaining one digit adjusted with 0.

And after the decimal point minimum 2 fractions and maximum 2 fractions are displayed.

In the second example I am passing fractions as ‘1-1’. So it displayed as “₹100.2”.

Angular Currency Pipe by default displays two decimal points irrespective of currency type. If currency is 100.

<!--₹100.00-->
<p>{{IntegerValue |currency:'INR':'symbol'}}</p>

To remove decimal points from the Angular currency pipe, we need to pass digitInfo parameter fractions as zero.

₹100
<p>{{IntegerValue |currency:'INR':'symbol':'3.0'}}</p>

Few country currencies does not support cent values in that case decimal points are truncated. For example Chilean peso Currency CLP does not support cents. So if the currency value is 100.23. It is displayed as 100.

You can see the below table for list of such countries.

CLP100
<p>{{Value | currency:'CLP':'symbol'}}</p>

Angular Currency Pipe example with locale

We can pass local as parameter to Angular currency Pipe as shown below.

<p>{{Value | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>

But the above code returns the error in console saying Missing locale data for the locale “fr”.

We are passing french locale information as “fr”. But in our application we dont have locale information for french.

We need to register the locale information.

import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';
registerLocaleData(localeFr, 'fr');

Follow the below steps to use Angular Currency Pipe with locale.

  1. Import the registerLocaleData from @angular/common
  2. Import locale Information from @angular/common/locales/fr.
  3. And Finally register the information using registerLocaleData method.
<!--output '0 100,23 $CA'-->
<p>{{Value | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>

<!--output '100,23 $CA'-->
<p>{{Value | currency:'CAD':'symbol':'3.2-2':'fr'}}</p>

Display Currency symbol to the right using Angular Currency Pipe

A lot of european countries use the currency symbol at the right side of currency value (France, Germany, Spain, Italy countries).

If you pass the locale information the symbol will be automatically displayed at the right side of value as shown in above french locale.

But the remaining currencies without locale still displays currency symbol to the left only.

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

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

Import LOCALE_ID from ‘@angular/core’ and pass it to the provides as shown above.

But this will change the locale across the application. So this approach is acceptable only if your site is using single locale information.

And the decission to show the currency symbol to the left or right should be based upon locale information only.

So its better to pass locale information to the Angular Currency Pipe whenever required.

Creating Custom Angular Currency Pipe

What if we want to change default parameters of Angular Currecny Pipe like default currency code,default currency symbol, default decimal locations and default locale?

For example we have a fixed currency format across the application as shown below.

{{ Value | currency:'EUR':'symbol':'3.2-2':'fr' }}
100,23 €

Each time I do not want to pass the other parameters and set the above parameters as default parameters so that the below code should display the required format.

{{ Value | currency }}
100,23 €

There is no way we can set the default parameters in Angular Currency Pipe. But we can define our own custom Angular currency Pipe to do the same.

Create a new file called custom.currencypipe.ts file and add the below code to it. You can change the paramters as per your requirements.

import { Pipe, PipeTransform } from '@angular/core';
import { formatCurrency, getCurrencySymbol } from '@angular/common';
@Pipe({
    name: 'mycurrency',
  })
  export class MycurrencyPipe implements PipeTransform {
    transform(
        value: number,
        currencyCode: string = 'EUR',
        display:
            | 'code'
            | 'symbol'
            | 'symbol-narrow'
            | string
            | boolean = 'symbol',
        digitsInfo: string = '3.2-2',
        locale: string = 'fr',
    ): string | null {
        return formatCurrency(
          value,
          locale,
          getCurrencySymbol(currencyCode, 'wide'),
          currencyCode,
          digitsInfo,
        );
    }
}

And after declaring _MyCurrencyPipe._ Import it in app.module.ts file and add it in declaration array of _app.module.ts. _As shown below.

import {MycurrencyPipe} from './custom.currencypipe';

@NgModule({
  declarations: [
    MycurrencyPipe
]);

Now i can use my custom currency pipe as show below.

{{ Value | mycurrency }}
100,23 €

List of All Countries currency codes of Angular Currency Pipes

Country CurrencyAngular Currency Pipe CodeEg: Result
Andorran peseta Currency{{Value|currency:"ADP":"symbol"}}ADP100
Afghan afghani Currency{{Value|currency:"AFN":"symbol"}}AFN100
Albanian lek Currency{{Value|currency:"ALL":"symbol"}}ALL100
Armenian dram Currency{{Value|currency:"AMD":"symbol"}}AMD100
Angolan kwanza Currency{{Value|currency:"AOA":"symbol"}}Kz100.00
Argentine peso Currency{{Value|currency:"ARS":"symbol"}}$100.00
Australian dollar Currency{{Value|currency:"AUD":"symbol"}}$100.00
Bosnia and Herzegovina convertible mark Currency{{Value|currency:"BAM":"symbol"}}KM100.00
Barbados dollar Currency{{Value|currency:"BBD":"symbol"}}$100.00
Bangladeshi taka Currency{{Value|currency:"BDT":"symbol"}}৳100.00
Bahraini dinar Currency{{Value|currency:"BHD":"symbol"}}BHD100.000
Burundian franc Currency{{Value|currency:"BIF":"symbol"}}BIF100
Bermudian dollar Currency{{Value|currency:"BMD":"symbol"}}$100.00
Brunei dollar Currency{{Value|currency:"BND":"symbol"}}$100.00
Boliviano Currency{{Value|currency:"BOB":"symbol"}}Bs100.00
Brazilian real Currency{{Value|currency:"BRL":"symbol"}}R$100.00
Bahamian dollar Currency{{Value|currency:"BSD":"symbol"}}$100.00
Botswana pula Currency{{Value|currency:"BWP":"symbol"}}P100.00
Belarusian ruble Currency{{Value|currency:"BYN":"symbol"}}р.100.00
Belarusian ruble Currency{{Value|currency:"BYR":"symbol"}}BYR100
Belize dollar Currency{{Value|currency:"BZD":"symbol"}}$100.00
Canadian dollar Currency{{Value|currency:"CAD":"symbol"}}$100.00
Swiss franc Currency{{Value|currency:"CHF":"symbol"}}CHF100.00
Unidad de Fomento Currency{{Value|currency:"CLF":"symbol"}}CLF100.0000
Chilean peso Currency{{Value|currency:"CLP":"symbol"}}$100
RenminbiRenminbi (Chinese) yuan Currency{{Value|currency:"CNY":"symbol"}}¥100.00
Colombian peso Currency{{Value|currency:"COP":"symbol"}}$100
Costa Rican colon Currency{{Value|currency:"CRC":"symbol"}}₡100.00
Cuban convertible peso Currency{{Value|currency:"CUC":"symbol"}}$100.00
Cuban peso Currency{{Value|currency:"CUP":"symbol"}}$100.00
Czech koruna Currency{{Value|currency:"CZK":"symbol"}}Kč100.00
Djiboutian franc Currency{{Value|currency:"DJF":"symbol"}}DJF100
Danish krone Currency{{Value|currency:"DKK":"symbol"}}kr100.00
Dominican peso Currency{{Value|currency:"DOP":"symbol"}}$100.00
Egyptian pound Currency{{Value|currency:"EGP":"symbol"}}E£100.00
Spanish peseta Currency{{Value|currency:"ESP":"symbol"}}₧100
Euro Currency{{Value|currency:"EUR":"symbol"}}€100.00
Fijian dollarFiji dollar Currency{{Value|currency:"FJD":"symbol"}}$100.00
Falkland Islands pound Currency{{Value|currency:"FKP":"symbol"}}£100.00
Pound sterling Currency{{Value|currency:"GBP":"symbol"}}£100.00
Georgian lari Currency{{Value|currency:"GEL":"symbol"}}₾100.00
Gibraltar pound Currency{{Value|currency:"GIP":"symbol"}}£100.00
Guinean franc Currency{{Value|currency:"GNF":"symbol"}}FG100
Guatemalan quetzal Currency{{Value|currency:"GTQ":"symbol"}}Q100.00
Guyanese dollar Currency{{Value|currency:"GYD":"symbol"}}$100
Hong Kong dollar Currency{{Value|currency:"HKD":"symbol"}}$100.00
Honduran lempira Currency{{Value|currency:"HNL":"symbol"}}L100.00
Croatian kuna Currency{{Value|currency:"HRK":"symbol"}}kn100.00
Hungarian forint Currency{{Value|currency:"HUF":"symbol"}}Ft100.00
Indonesian rupiah Currency{{Value|currency:"IDR":"symbol"}}Rp100
Israeli new shekel Currency{{Value|currency:"ILS":"symbol"}}₪100.00
Indian rupee Currency{{Value|currency:"INR":"symbol"}}₹100.00
Iraqi dinar Currency{{Value|currency:"IQD":"symbol"}}IQD100
Iranian rial Currency{{Value|currency:"IRR":"symbol"}}IRR100
Icelandic krona Currency{{Value|currency:"ISK":"symbol"}}kr100
Italian lira Currency{{Value|currency:"ITL":"symbol"}}ITL100
Jamaican dollar Currency{{Value|currency:"JMD":"symbol"}}$100.00
Jordanian dinar Currency{{Value|currency:"JOD":"symbol"}}JOD100.000
Japanese yen Currency{{Value|currency:"JPY":"symbol"}}¥100
Cambodian riel Currency{{Value|currency:"KHR":"symbol"}}៛100.00
Comoro franc Currency{{Value|currency:"KMF":"symbol"}}CF100
North Korean won Currency{{Value|currency:"KPW":"symbol"}}₩100
South Korean won Currency{{Value|currency:"KRW":"symbol"}}₩100
Kuwaiti dinar Currency{{Value|currency:"KWD":"symbol"}}KWD100.000
Cayman Islands dollar Currency{{Value|currency:"KYD":"symbol"}}$100.00
Kazakhstani tenge Currency{{Value|currency:"KZT":"symbol"}}₸100.00
Lao kip Currency{{Value|currency:"LAK":"symbol"}}₭100
Lebanese pound Currency{{Value|currency:"LBP":"symbol"}}L£100
Sri Lankan rupee Currency{{Value|currency:"LKR":"symbol"}}Rs100.00
Liberian dollar Currency{{Value|currency:"LRD":"symbol"}}$100.00
Lithuanian litas Currency{{Value|currency:"LTL":"symbol"}}Lt100.00
Luxembourg franc Currency{{Value|currency:"LUF":"symbol"}}LUF100
Latvian lats Currency{{Value|currency:"LVL":"symbol"}}Ls100.00
Libyan dinar Currency{{Value|currency:"LYD":"symbol"}}LYD100.000
Malagasy ariary Currency{{Value|currency:"MGA":"symbol"}}Ar100
Malagasy franc Currency{{Value|currency:"MGF":"symbol"}}MGF100
Myanmar kyat Currency{{Value|currency:"MMK":"symbol"}}K100
Mongolian tugrik Currency{{Value|currency:"MNT":"symbol"}}₮100
Mauritanian Ouguiya Currency{{Value|currency:"MRO":"symbol"}}MRO100
Mauritian rupee Currency{{Value|currency:"MUR":"symbol"}}Rs100
Mexican peso Currency{{Value|currency:"MXN":"symbol"}}$100.00
Malaysian ringgit Currency{{Value|currency:"MYR":"symbol"}}RM100.00
Namibian dollar Currency{{Value|currency:"NAD":"symbol"}}$100.00
Nigerian naira Currency{{Value|currency:"NGN":"symbol"}}₦100.00
Nicaraguan cordoba Currency{{Value|currency:"NIO":"symbol"}}C$100.00
Norwegian krone Currency{{Value|currency:"NOK":"symbol"}}kr100.00
Nepalese rupee Currency{{Value|currency:"NPR":"symbol"}}Rs100.00
New Zealand dollar Currency{{Value|currency:"NZD":"symbol"}}$100.00
Omani rial Currency{{Value|currency:"OMR":"symbol"}}OMR100.000
Philippine peso Currency{{Value|currency:"PHP":"symbol"}}₱100.00
Pakistani rupee Currency{{Value|currency:"PKR":"symbol"}}Rs100
Polish zloty Currency{{Value|currency:"PLN":"symbol"}}zł100.00
Paraguayan guarani Currency{{Value|currency:"PYG":"symbol"}}₲100
Romanian leu Currency{{Value|currency:"RON":"symbol"}}lei100.00
Serbian dinar Currency{{Value|currency:"RSD":"symbol"}}RSD100
Russian ruble Currency{{Value|currency:"RUB":"symbol"}}₽100.00
Russian ruble Currency{{Value|currency:"RUR":"symbol"}}р.100.00
Rwandan franc Currency{{Value|currency:"RWF":"symbol"}}RF100
Solomon Islands dollar Currency{{Value|currency:"SBD":"symbol"}}$100.00
Swedish krona/kronor Currency{{Value|currency:"SEK":"symbol"}}kr100.00
Singapore dollar Currency{{Value|currency:"SGD":"symbol"}}$100.00
Saint Helena pound Currency{{Value|currency:"SHP":"symbol"}}£100.00
Sierra Leonean leone Currency{{Value|currency:"SLL":"symbol"}}SLL100
Somali shilling Currency{{Value|currency:"SOS":"symbol"}}SOS100
Surinamese dollar Currency{{Value|currency:"SRD":"symbol"}}$100.00
South Sudanese pound Currency{{Value|currency:"SSP":"symbol"}}£100.00
Sao Tome/Principe Dobra Currency{{Value|currency:"STD":"symbol"}}STD100
Sao Tome/Principe Dobra Currency{{Value|currency:"STN":"symbol"}}Db100.00
Syrian pound Currency{{Value|currency:"SYP":"symbol"}}£100
Thai baht Currency{{Value|currency:"THB":"symbol"}}฿100.00
Turkmenistani manat Currency{{Value|currency:"TMM":"symbol"}}TMM100
Tunisian dinar Currency{{Value|currency:"TND":"symbol"}}TND100.000
Tongan paanga Currency{{Value|currency:"TOP":"symbol"}}T$100.00
Turkish lira Currency{{Value|currency:"TRL":"symbol"}}TRL100
Turkish lira Currency{{Value|currency:"TRY":"symbol"}}₺100.00
Trinidad and Tobago dollar Currency{{Value|currency:"TTD":"symbol"}}$100.00
New Taiwan dollar Currency{{Value|currency:"TWD":"symbol"}}$100.00
Tanzanian shilling Currency{{Value|currency:"TZS":"symbol"}}TZS100
Ukrainian hryvnia Currency{{Value|currency:"UAH":"symbol"}}₴100.00
Ugandan shilling Currency{{Value|currency:"UGX":"symbol"}}UGX100
United States dollar Currency{{Value|currency:"USD":"symbol"}}$100.00
Uruguay Peso en Unidades Indexadas Currency{{Value|currency:"UYI":"symbol"}}UYI100
Uruguayan peso Currency{{Value|currency:"UYU":"symbol"}}$100.00
Uzbekistan som Currency{{Value|currency:"UZS":"symbol"}}UZS100
Venezuelan bolivar Currency{{Value|currency:"VEF":"symbol"}}Bs100.00
Vietnamese dong Currency{{Value|currency:"VND":"symbol"}}₫100
Vanuatu vatu Currency{{Value|currency:"VUV":"symbol"}}VUV100
CFA franc BEAC Currency{{Value|currency:"XAF":"symbol"}}FCFA100
East Caribbean dollar Currency{{Value|currency:"XCD":"symbol"}}$100.00
CFA franc BCEAO Currency{{Value|currency:"XOF":"symbol"}}CFA100
CFP franc (franc Pacifique) Currency{{Value|currency:"XPF":"symbol"}}CFPF100
Yemeni rial Currency{{Value|currency:"YER":"symbol"}}YER100
South African rand Currency{{Value|currency:"ZAR":"symbol"}}R100.00
Zambian kwacha Currency{{Value|currency:"ZMK":"symbol"}}ZMK100
Zambian kwacha Currency{{Value|currency:"ZMW":"symbol"}}ZK100.00
Zimbabwean dollar Currency{{Value|currency:"ZWD":"symbol"}}ZWD100
Spread the word :

Get free link to download 900+ material icons
Avatar
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.

Next
Previous