Angular Currency Pipe and Format Currency Example

In Angular, We have a few built-in pipes. In this blog post, we’ll learn about Angular Currency Pipe with Example and we will also see few examples of Angular Currency Pipe and Format Angular Currency Pipe.

We’ll see an example of using Angular Currency Pipe with Example and we will also see Angular Current Pipe with different formats.

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

Table of Contents

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

Parameter	Description
currencyCode	The currency code, i.e USD for US dollar or EUR for the Euro.
display	The 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.
digitsInfo	Format: {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.
locale	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.

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:

Parameter	Value
currencyCode	USD (Read Deprecation note)
display	symbol (default)
minIntegerDigits	1 (default)
minFractionDigits	0 (default)
maxFractionDigits	3 (default)
locale	en-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.

Parameter	Value
currencyCode	CAD
display	symbol (default)
minIntegerDigits	1 (default)
minFractionDigits	0 (default)
maxFractionDigits	3 (default)
locale	en-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:

code
symbol
symbol-narrow
string
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.

Parameter	Value
currencyCode	CAD
display	code
minIntegerDigits	1 (default)
minFractionDigits	0 (default)
maxFractionDigits	3 (default)
locale	en-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.

Parameter	Value
currencyCode	CAD
display	symbol
minIntegerDigits	1 (default)
minFractionDigits	0 (default)
maxFractionDigits	3 (default)
locale	en-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.

Parameter	Value
currencyCode	CAD
display	symbol-narrow
minIntegerDigits	1 (default)
minFractionDigits	0 (default)
maxFractionDigits	3 (default)
locale	en-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.

Parameter	Value
currencyCode	CAD
display	symbol
minIntegerDigits	4
minFractionDigits	2
maxFractionDigits	2
locale	fr

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.

Import the registerLocaleData from @angular/common
Import locale from @angular/common/locales/fr
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

Currency	Code	Output
United Arab Emirates Dirham	AED	AED100.00
Afghan Afghani	AFN	AFN100
Albanian Lek	ALL	ALL100
Armenian Dram	AMD	AMD100.00
Netherlands Antillean Guilder	ANG	ANG100.00
Angolan Kwanza	AOA	AOA100.00
Argentine Peso	ARS	ARS100.00
Australian Dollar	AUD	A$100.00
Aruban Florin	AWG	AWG100.00
Azerbaijani Manat	AZN	AZN100.00
Bosnia-Herzegovina Convertible Mark	BAM	BAM100.00
Barbadian Dollar	BBD	BBD100.00
Bangladeshi Taka	BDT	BDT100.00
Bulgarian Lev	BGN	BGN100.00
Bahraini Dinar	BHD	BHD100.000
Burundian Franc	BIF	BIF100
Bermudan Dollar	BMD	BMD100.00
Brunei Dollar	BND	BND100.00
Bolivian Boliviano	BOB	BOB100.00
Brazilian Real	BRL	R$100.00
Bahamian Dollar	BSD	BSD100.00
Bitcoin	BTC	BTC100.00
Bhutanese Ngultrum	BTN	BTN100.00
Botswanan Pula	BWP	BWP100.00
Belarusian Ruble	BYN	BYN100.00
Belize Dollar	BZD	BZD100.00
Canadian Dollar	CAD	CA$100.00
Congolese Franc	CDF	CDF100.00
Swiss Franc	CHF	CHF100.00
Chilean Unit of Account (UF)	CLF	CLF100.0000
Chilean Peso	CLP	CLP100
Chinese Yuan (Offshore)	CNH	CNH100.00
Chinese Yuan	CNY	CN¥100.00
Colombian Peso	COP	COP100.00
Costa Rican Colón	CRC	CRC100.00
Cuban Convertible Peso	CUC	CUC100.00
Cuban Peso	CUP	CUP100.00
Cape Verdean Escudo	CVE	CVE100.00
Czech Republic Koruna	CZK	CZK100.00
Djiboutian Franc	DJF	DJF100
Danish Krone	DKK	DKK100.00
Dominican Peso	DOP	DOP100.00
Algerian Dinar	DZD	DZD100.00
Egyptian Pound	EGP	EGP100.00
Eritrean Nakfa	ERN	ERN100.00
Ethiopian Birr	ETB	ETB100.00
Euro	EUR	€100.00
Fijian Dollar	FJD	FJD100.00
Falkland Islands Pound	FKP	FKP100.00
British Pound Sterling	GBP	£100.00
Georgian Lari	GEL	GEL100.00
Guernsey Pound	GGP	GGP100.00
Ghanaian Cedi	GHS	GHS100.00
Gibraltar Pound	GIP	GIP100.00
Gambian Dalasi	GMD	GMD100.00
Guinean Franc	GNF	GNF100
Guatemalan Quetzal	GTQ	GTQ100.00
Guyanaese Dollar	GYD	GYD100.00
Hong Kong Dollar	HKD	HK$100.00
Honduran Lempira	HNL	HNL100.00
Croatian Kuna	HRK	HRK100.00
Haitian Gourde	HTG	HTG100.00
Hungarian Forint	HUF	HUF100.00
Indonesian Rupiah	IDR	IDR100.00
Israeli New Sheqel	ILS	₪100.00
Manx pound	IMP	IMP100.00
Indian Rupee	INR	₹100.00
Iraqi Dinar	IQD	IQD100
Iranian Rial	IRR	IRR100
Icelandic Króna	ISK	ISK100
Jersey Pound	JEP	JEP100.00
Jamaican Dollar	JMD	JMD100.00
Jordanian Dinar	JOD	JOD100.000
Japanese Yen	JPY	¥100
Kenyan Shilling	KES	KES100.00
Kyrgystani Som	KGS	KGS100.00
Cambodian Riel	KHR	KHR100.00
Comorian Franc	KMF	KMF100
North Korean Won	KPW	KPW100
South Korean Won	KRW	₩100
Kuwaiti Dinar	KWD	KWD100.000
Cayman Islands Dollar	KYD	KYD100.00
Kazakhstani Tenge	KZT	KZT100.00
Laotian Kip	LAK	LAK100
Lebanese Pound	LBP	LBP100
Sri Lankan Rupee	LKR	LKR100.00
Liberian Dollar	LRD	LRD100.00
Lesotho Loti	LSL	LSL100.00
Libyan Dinar	LYD	LYD100.000
Moroccan Dirham	MAD	MAD100.00
Moldovan Leu	MDL	MDL100.00
Malagasy Ariary	MGA	MGA100
Macedonian Denar	MKD	MKD100.00
Myanma Kyat	MMK	MMK100
Mongolian Tugrik	MNT	MNT100.00
Macanese Pataca	MOP	MOP100.00
Mauritanian Ouguiya (pre-2018)	MRO	MRO100
Mauritanian Ouguiya	MRU	MRU100.00
Mauritian Rupee	MUR	MUR100.00
Maldivian Rufiyaa	MVR	MVR100.00
Malawian Kwacha	MWK	MWK100.00
Mexican Peso	MXN	MX$100.00
Malaysian Ringgit	MYR	MYR100.00
Mozambican Metical	MZN	MZN100.00
Namibian Dollar	NAD	NAD100.00
Nigerian Naira	NGN	NGN100.00
Nicaraguan Córdoba	NIO	NIO100.00
Norwegian Krone	NOK	NOK100.00
Nepalese Rupee	NPR	NPR100.00
New Zealand Dollar	NZD	NZ$100.00
Omani Rial	OMR	OMR100.000
Panamanian Balboa	PAB	PAB100.00
Peruvian Nuevo Sol	PEN	PEN100.00
Papua New Guinean Kina	PGK	PGK100.00
Philippine Peso	PHP	PHP100.00
Pakistani Rupee	PKR	PKR100.00
Polish Zloty	PLN	PLN100.00
Paraguayan Guarani	PYG	PYG100
Qatari Rial	QAR	QAR100.00
Romanian Leu	RON	RON100.00
Serbian Dinar	RSD	RSD100
Russian Ruble	RUB	RUB100.00
Rwandan Franc	RWF	RWF100
Saudi Riyal	SAR	SAR100.00
Solomon Islands Dollar	SBD	SBD100.00
Seychellois Rupee	SCR	SCR100.00
Sudanese Pound	SDG	SDG100.00
Swedish Krona	SEK	SEK100.00
Singapore Dollar	SGD	SGD100.00
Saint Helena Pound	SHP	SHP100.00
Sierra Leonean Leone	SLL	SLL100
Somali Shilling	SOS	SOS100
Surinamese Dollar	SRD	SRD100.00
South Sudanese Pound	SSP	SSP100.00
São Tomé and Príncipe Dobra (pre-2018)	STD	STD100
São Tomé and Príncipe Dobra	STN	STN100.00
Salvadoran Colón	SVC	SVC100.00
Syrian Pound	SYP	SYP100
Swazi Lilangeni	SZL	SZL100.00
Thai Baht	THB	THB100.00
Tajikistani Somoni	TJS	TJS100.00
Turkmenistani Manat	TMT	TMT100.00
Tunisian Dinar	TND	TND100.000
Tongan Pa’anga	TOP	TOP100.00
Turkish Lira	TRY	TRY100.00
Trinidad and Tobago Dollar	TTD	TTD100.00
New Taiwan Dollar	TWD	NT$100.00
Tanzanian Shilling	TZS	TZS100.00
Ukrainian Hryvnia	UAH	UAH100.00
Ugandan Shilling	UGX	UGX100
United States Dollar	USD	$100.00
Uruguayan Peso	UYU	UYU100.00
Uzbekistan Som	UZS	UZS100.00
Venezuelan Bolívar Fuerte	VEF	VEF100.00
Vietnamese Dong	VND	₫100
Vanuatu Vatu	VUV	VUV100
Samoan Tala	WST	WST100.00
CFA Franc BEAC	XAF	FCFA100
Silver Ounce	XAG	XAG100.00
Gold Ounce	XAU	XAU100.00
East Caribbean Dollar	XCD	EC$100.00
Special Drawing Rights	XDR	XDR100.00
CFA Franc BCEAO	XOF	CFA100
Palladium Ounce	XPD	XPD100.00
CFP Franc	XPF	CFPF100
Platinum Ounce	XPT	XPT100.00
Yemeni Rial	YER	YER100
South African Rand	ZAR	ZAR100.00
Zambian Kwacha	ZMW	ZMW100.00
Zimbabwean Dollar	ZWL	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:

The Front-end Developer Roadmap 2023

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

Thanks.