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.
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.ts</mark>
number1: number = 0.259;
Now use a currency pipe to format the number in template file as below:
<mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.html</mark>
{{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) |
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.ts</mark></strong>
number1: number = 0.259;
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.html</mark></strong>
{{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.
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.ts</mark></strong>
number1: number = 0.259;
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.html</mark></strong>
{{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) |
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.ts</mark></strong>
number1: number = 0.259;
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.html</mark></strong>
{{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) |
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.ts</mark></strong>
number1: number = 0.259;
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.html</mark></strong>
{{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.
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.ts</mark></strong>
number1: number =102;
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.html</mark></strong>
{{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)
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.ts</mark></strong>
number1: number =102;
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.html</mark></strong>
{{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 |
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.ts</mark></strong>
number1: number = 3.5;
<strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">app.component.html</mark></strong>
{{ 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
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
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:
- Angular Percent Pipe Example
- Angular Decimal Pipe Example
- Angular Slice Pipe Example
- Angular Date Pipe Example
- Custom Validators in Angular
- Getting Started With Angular Reactive Forms
- Angular Reactive Forms With Built In Validators Example
- Match Password Validation in Angular Reactive Forms
- CSS Tricks for Uppercase and LowerCase and TitleCase
- Get Started With Ionic4
- How to use ngrx/store with Ionic 4
- Angular Material Grid Layout Example
- Angular Material Card Example
- Angular Material List Example
- Angular Material Button
- Angular Material Toggle Button Example
- Angular Material Date Range Picker
If you like this post, please share it with your friends.
Thanks.