Angular Currency Pipe example

Angular Currency Pipe and Format Currency Example

In Angular, We have a few built-in pipes. In this blog post, we’ll learn about Currency Pipe in Angular.

We’ll see an example of using Currency Pipe with different formats.

In Angular, Pipe is something that takes in data as input and transforms it into the desired output.

Currency Pipe

It transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character, and other locale-specific configurations.

CurrencyPipe is an API provided by angular. It is part of angular CommonModule.  

CurrencyPipe is Parameterized Pipe. Parameterized Pipe accepts any number of an optional parameter to get the desired output from the given input.  

To add parameters to a pipe, follow the pipe name with a colon ( : ) and then the parameter value (such as currency:’4.3-5′).   

If the pipe accepts multiple parameters, separate the values with colons (such as currency:’4.5-5′:’fr’).

Format

{{ value_expression | currency [ :currencyCode [ :display [ : digitsInfo [ : locale ] ]]] }}

The basic format of CurrencyPipe is as above.

value_expression: the number to be formatted as a currency.

currency: A pipe keyword that is used with a pipe operator.

Currency Pipe Parameters

ParameterDescription
currencyCodeThe currency code, i.e USD for US dollar or EUR for the Euro.
displayThe format for the currency indicator. (Default Value is “symbol”)
1. code: Show the code (such as USD).
2. symbol(default): Show the symbol (such as $).
3. symbol-narrow: Use the narrow symbol for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. If the locale has no narrow symbol, uses the standard symbol for the locale.
4. String: Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol.
5. Boolean (marked deprecated in v5): true for symbol and false for code.digitsInfo: Decimal format representation in string format.  
digitsInfoFormat: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.
minIntegerDigits: The minimum number of integer digits before the decimal point. Default is 1.
minFractionDigits: The minimum number of digits after the decimal point. Default is 0.
maxFractionDigits: The maximum number of digits after the decimal point. Default is 3.
localelocale: A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.

CurrencyPipe Example

Deprecation Note: The default currency code USD is deprecated from angular v9.

In v11 the default currency code will be taken from the current locale identified by the LOCAL_ID token

To get the previous behaviour of getting default currency code as USD, you could get it by creating DEFAULT_CURRENCY_CODE provider in your application NgModule as follows:

{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}

1) No Formatting

It will use the default value for all the parameters.

Default parameters values will be as follows:

ParameterValue
currencyCodeUSD (Read Deprecation note)
displaysymbol (default)
minIntegerDigits1 (default)
minFractionDigits0 (default)
maxFractionDigits3 (default)
localeen-US (default)

Now declare the number in a component that will be formatted.

app.component.ts

number1: number = 0.259;

  Now use a currency pipe to format the number in template file as below:

app.component.html

{{number1 | currency }}

Output:

$0.26

2) Angular Currency Pipe with different currency Code

1. currency: ‘CAD’

Here the display property will be assigned a default value as “symbol”. so it will show CA$ in the output which is a symbol for CAD.

Following values will be assigned to the parameters.

ParameterValue
currencyCodeCAD
displaysymbol (default)
minIntegerDigits1 (default)
minFractionDigits0 (default)
maxFractionDigits3 (default)
localeen-US. (default)

app.component.ts

number1: number = 0.259;

app.component.html

{{number1 | currency:'CAD'}}

Output:

CA$0.26

2. other currency codes(USD, EUR, INR, JPY, AFN)

number1: number = 1980;

Likewise, you can use different currency code as follows:

{{number1 | currency:'USD'}} {{number1 | currency:'EUR'}} {{number1 | currency:'INR'}} {{number1 | currency:'JPY'}} {{number1 | currency:'AFN'}}

Output

$1,980.00 €1,980.00 ₹1,980.00 ¥1,980 AFN1,980

3) Angular Currency Pipe with display

display parameter can contain any one of the following:

  1. code
  2. symbol
  3. symbol-narrow
  4. string
  5. boolean

1. code

Display property with value code shows the code such as USD, EUR, JPY etc.

CAD currency (currency:’CAD’:’code’)

It will use the following values for parameters.  

ParameterValue
currencyCodeCAD
displaycode
minIntegerDigits1 (default)
minFractionDigits0 (default)
maxFractionDigits3 (default)
localeen-US (default)

Here we have assigned value “code” to display property. so it will show the code(CAD) but not a symbol.

app.component.ts

number1: number = 0.259;

app.component.html

{{number1 | currency:'CAD':'code'}}

Output:

CAD0.26
other currency codes(USD, EUR, INR, JPY, AFN)
number1: number = 1980;

Likewise, you can use different currency code as follows:

{{number1 | currency:'USD':'code'}} {{number1 | currency:'EUR':'code'}} {{number1 | currency:'INR':'code'}} {{number1 | currency:'JPY':'code'}} {{number1 | currency:'AFN':'code'}}

Output

USD1,980.00 EUR1,980.00 INR1,980.00 JPY1,980 AFN1,980

2. symbol

Symbol is default value for display property. Display property with value symbol shows the symbol, such as $, €, ¥ etc.

CAD currency (currency:’CAD’:’symbol’)

It will use the following values for parameters.  

ParameterValue
currencyCodeCAD
displaysymbol
minIntegerDigits1 (default)
minFractionDigits0 (default)
maxFractionDigits3 (default)
localeen-US (default)

app.component.ts

number1: number = 0.259;

app.component.html

{{number1 | currency:'CAD':'symbol'}}

Output:

CA$0.26
other currency codes(USD, EUR, INR, JPY, AFN)
number1: number = 1980;

Likewise, you can use different currency code as follows:

{{number1 | currency:'USD':'symbol'}} {{number1 | currency:'EUR':'symbol'}} {{number1 | currency:'INR':'symbol'}} {{number1 | currency:'JPY':'symbol'}} {{number1 | currency:'AFN':'symbol'}}

Output

$1,980.00 €1,980.00 ₹1,980.00 ¥1,980 AFN1,980

3. symbol-narrow

It uses the narrow symbol for locales that have two symbols for their currency. For example, the Canadian dollar CAD has the symbol CA$ and the symbol-narrow $. If the locale has no narrow symbol, uses the standard symbol for the locale.

CAD currency code ()

It will use the following values for parameters.  

ParameterValue
currencyCodeCAD
displaysymbol-narrow
minIntegerDigits1 (default)
minFractionDigits0 (default)
maxFractionDigits3 (default)
localeen-US (default)

app.component.ts

number1: number = 0.259;

app.component.html

{{number1 | currency:'CAD':'symbol-narrow'}}

Output:

$0.26
other currency codes(USD, EUR, INR, JPY, AFN)
number1: number = 1980;

Likewise, you can use different currency code as follows:

{{number1 | currency:'USD':'symbol-narrow'}} {{number1 | currency:'EUR':'symbol-narrow'}} {{number1 | currency:'INR':'symbol-narrow'}} {{number1 | currency:'JPY':'symbol-narrow'}} {{number1 | currency:'AFN':'symbol-narrow'}}

Output

$1,980.00 €1,980.00 ₹1,980.00 ¥1,980 AFN1,980

4. String

Use the given string value instead of a code or a symbol. For example, an empty string will suppress the currency & symbol.

Different currencies
number1: number = 1980;

Likewise, you can use different currency code as follows:

{{number1 | currency:'USD':'American dollar '}} {{number1 | currency:'EUR':'Euro '}} {{number1 | currency:'INR':'Indian Rupee '}} {{number1 | currency:'JPY':'Japanese Yen '}} {{number1 | currency:'AFN':'Afghan Afghani '}}

Output

American dollar 1,980.00 Euro 1,980.00 Indian Rupee 1,980.00 Japanese Yen 1,980 Afghan Afghani 1,980

4)  Angular Currency Pipe with different decimal representation (digitsInfo)

Angular currency pipe by default display two decimal places. and if you want to remove that decimal places(no decimal places) you’ll need to specify o in digitsInfo.

1. Angular currency pipe one, two and three decimal example

It will use the following values for parameters.

app.component.ts

number1: number =102;

app.component.html

{{number1 | currency:'USD':'symbol':'4.2-2'}} {{number1 | currency:'USD':'symbol':'3.3-3'}} {{number1 | currency:'USD':'symbol':'5.1-1'}}

Output:

$0,102.00 $102.000 $00,102.0

2. Angular Currency Pipe No Decimal

This is useful when you don’t want to display cents in amount. (Angular Currency pipe no cents)

app.component.ts

number1: number =102;

app.component.html

{{number1 | currency:'USD':'symbol':'4.0'}} {{number1 | currency:'USD':'symbol':'3.0'}} {{number1 | currency:'USD':'symbol':'5.0'}}

Output

$0102 $102 $00,102

5) Angular Currency Pipe with locale

1. currency:’CAD’:’symbol’:’4.2-2′:’fr’

It will use the following values for parameters.

ParameterValue
currencyCodeCAD
displaysymbol
minIntegerDigits4
minFractionDigits2
maxFractionDigits2
localefr

app.component.ts

number1: number = 3.5;

app.component.html

{{ number1 | currency:'CAD':'symbol':'4.2-2':'fr'}

If you’ll run the above code, it’ll thrown an error:

ERROR Error: Missing locale data for the locale “fr”.

Because we didn’t register locale to angular application, we’ll first need to register locale information in app.module.ts.

You can register locale by following these steps.

  1. Import the registerLocaleData from @angular/common
  2. Import locale from @angular/common/locales/fr
  3. register the locale using imported registerLocaleData method
import { registerLocaleData } from '@angular/common'; import localeFr from '@angular/common/locales/fr'; registerLocaleData(localeFr, 'fr');

and then if you’ll run the code, you’ll get a following output.

Output:

0 001,35 CA$

List of currencies with output for Angular Currency Pipe

Here’s the list of currencies for the output of this input

{{number1 |currency:item.key:'symbol'}}.

and number1 = 100

You can find the demo from here

CurrencyCodeOutput
United Arab Emirates DirhamAED AED100.00
Afghan AfghaniAFN AFN100
Albanian LekALL ALL100
Armenian DramAMD AMD100.00
Netherlands Antillean GuilderANG ANG100.00
Angolan KwanzaAOA AOA100.00
Argentine PesoARS ARS100.00
Australian DollarAUD A$100.00
Aruban FlorinAWG AWG100.00
Azerbaijani ManatAZN AZN100.00
Bosnia-Herzegovina Convertible MarkBAM BAM100.00
Barbadian DollarBBD BBD100.00
Bangladeshi TakaBDT BDT100.00
Bulgarian LevBGN BGN100.00
Bahraini DinarBHD BHD100.000
Burundian FrancBIF BIF100
Bermudan DollarBMD BMD100.00
Brunei DollarBND BND100.00
Bolivian BolivianoBOB BOB100.00
Brazilian RealBRL R$100.00
Bahamian DollarBSD BSD100.00
BitcoinBTC BTC100.00
Bhutanese NgultrumBTN BTN100.00
Botswanan PulaBWP BWP100.00
Belarusian RubleBYN BYN100.00
Belize DollarBZD BZD100.00
Canadian DollarCAD CA$100.00
Congolese FrancCDF CDF100.00
Swiss FrancCHF CHF100.00
Chilean Unit of Account (UF)CLF CLF100.0000
Chilean PesoCLP CLP100
Chinese Yuan (Offshore)CNH CNH100.00
Chinese YuanCNY CN¥100.00
Colombian PesoCOP COP100.00
Costa Rican ColónCRC CRC100.00
Cuban Convertible PesoCUC CUC100.00
Cuban PesoCUP CUP100.00
Cape Verdean EscudoCVE CVE100.00
Czech Republic KorunaCZK CZK100.00
Djiboutian FrancDJF DJF100
Danish KroneDKK DKK100.00
Dominican PesoDOP DOP100.00
Algerian DinarDZD DZD100.00
Egyptian PoundEGP EGP100.00
Eritrean NakfaERN ERN100.00
Ethiopian BirrETB ETB100.00
EuroEUR €100.00
Fijian DollarFJD FJD100.00
Falkland Islands PoundFKP FKP100.00
British Pound SterlingGBP £100.00
Georgian LariGEL GEL100.00
Guernsey PoundGGP GGP100.00
Ghanaian CediGHS GHS100.00
Gibraltar PoundGIP GIP100.00
Gambian DalasiGMD GMD100.00
Guinean FrancGNF GNF100
Guatemalan QuetzalGTQ GTQ100.00
Guyanaese DollarGYD GYD100.00
Hong Kong DollarHKD HK$100.00
Honduran LempiraHNL HNL100.00
Croatian KunaHRK HRK100.00
Haitian GourdeHTG HTG100.00
Hungarian ForintHUF HUF100.00
Indonesian RupiahIDR IDR100.00
Israeli New SheqelILS ₪100.00
Manx poundIMP IMP100.00
Indian RupeeINR ₹100.00
Iraqi DinarIQD IQD100
Iranian RialIRR IRR100
Icelandic KrónaISK ISK100
Jersey PoundJEP JEP100.00
Jamaican DollarJMD JMD100.00
Jordanian DinarJOD JOD100.000
Japanese YenJPY ¥100
Kenyan ShillingKES KES100.00
Kyrgystani SomKGS KGS100.00
Cambodian RielKHR KHR100.00
Comorian FrancKMF KMF100
North Korean WonKPW KPW100
South Korean WonKRW ₩100
Kuwaiti DinarKWD KWD100.000
Cayman Islands DollarKYD KYD100.00
Kazakhstani TengeKZT KZT100.00
Laotian KipLAK LAK100
Lebanese PoundLBP LBP100
Sri Lankan RupeeLKR LKR100.00
Liberian DollarLRD LRD100.00
Lesotho LotiLSL LSL100.00
Libyan DinarLYD LYD100.000
Moroccan DirhamMAD MAD100.00
Moldovan LeuMDL MDL100.00
Malagasy AriaryMGA MGA100
Macedonian DenarMKD MKD100.00
Myanma KyatMMK MMK100
Mongolian TugrikMNT MNT100.00
Macanese PatacaMOP MOP100.00
Mauritanian Ouguiya (pre-2018)MRO MRO100
Mauritanian OuguiyaMRU MRU100.00
Mauritian RupeeMUR MUR100.00
Maldivian RufiyaaMVR MVR100.00
Malawian KwachaMWK MWK100.00
Mexican PesoMXN MX$100.00
Malaysian RinggitMYR MYR100.00
Mozambican MeticalMZN MZN100.00
Namibian DollarNAD NAD100.00
Nigerian NairaNGN NGN100.00
Nicaraguan CórdobaNIO NIO100.00
Norwegian KroneNOK NOK100.00
Nepalese RupeeNPR NPR100.00
New Zealand DollarNZD NZ$100.00
Omani RialOMR OMR100.000
Panamanian BalboaPAB PAB100.00
Peruvian Nuevo SolPEN PEN100.00
Papua New Guinean KinaPGK PGK100.00
Philippine PesoPHP PHP100.00
Pakistani RupeePKR PKR100.00
Polish ZlotyPLN PLN100.00
Paraguayan GuaraniPYG PYG100
Qatari RialQAR QAR100.00
Romanian LeuRON RON100.00
Serbian DinarRSD RSD100
Russian RubleRUB RUB100.00
Rwandan FrancRWF RWF100
Saudi RiyalSAR SAR100.00
Solomon Islands DollarSBD SBD100.00
Seychellois RupeeSCR SCR100.00
Sudanese PoundSDG SDG100.00
Swedish KronaSEK SEK100.00
Singapore DollarSGD SGD100.00
Saint Helena PoundSHP SHP100.00
Sierra Leonean LeoneSLL SLL100
Somali ShillingSOS SOS100
Surinamese DollarSRD SRD100.00
South Sudanese PoundSSP SSP100.00
São Tomé and Príncipe Dobra (pre-2018)STD STD100
São Tomé and Príncipe DobraSTN STN100.00
Salvadoran ColónSVC SVC100.00
Syrian PoundSYP SYP100
Swazi LilangeniSZL SZL100.00
Thai BahtTHB THB100.00
Tajikistani SomoniTJS TJS100.00
Turkmenistani ManatTMT TMT100.00
Tunisian DinarTND TND100.000
Tongan Pa’angaTOP TOP100.00
Turkish LiraTRY TRY100.00
Trinidad and Tobago DollarTTD TTD100.00
New Taiwan DollarTWD NT$100.00
Tanzanian ShillingTZS TZS100.00
Ukrainian HryvniaUAH UAH100.00
Ugandan ShillingUGX UGX100
United States DollarUSD $100.00
Uruguayan PesoUYU UYU100.00
Uzbekistan SomUZS UZS100.00
Venezuelan Bolívar FuerteVEF VEF100.00
Vietnamese DongVND ₫100
Vanuatu VatuVUV VUV100
Samoan TalaWST WST100.00
CFA Franc BEACXAF FCFA100
Silver OunceXAG XAG100.00
Gold OunceXAU XAU100.00
East Caribbean DollarXCD EC$100.00
Special Drawing RightsXDR XDR100.00
CFA Franc BCEAOXOF CFA100
Palladium OunceXPD XPD100.00
CFP FrancXPF CFPF100
Platinum OunceXPT XPT100.00
Yemeni RialYER YER100
South African RandZAR ZAR100.00
Zambian KwachaZMW ZMW100.00
Zimbabwean DollarZWL ZWL100.00

Angular Currency Pipe FAQ

Angular Currency Pipe – Frequently Asked Questions(FAQ)

What is Angular Currency Pipe Syntax?

{{ value_expression | currency [ :currencyCode [ :display [ : digitsInfo [ : locale ] ]]] }}
  • value_expression: the number to be formatted as a currency.
  • currency: A pipe keyword that is used with a pipe operator.
  • currencyCode: The currency code, i.e USD for US dollar or EUR for the Euro.
  • digitsInfo : Format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.
  • locale : A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.

Angular Currency Pipe with Currency Code Syntax

{{number1 | currency:'CAD'}}

Angular Currency Pipe Remove Decimal(No Decimal)

{{number1 | currency:'USD':'symbol':'4.0'}}
This is useful when you don’t want to display cents in amount. (Angular Currency pipe no cents)

Angular Currency Pipe INR

{{number1 | currency:'INR':'symbol'}}
Output: ₹1,980.00

Also, read:  

If you like this post, please share it with your friends.  

Thanks.

Leave a Comment