Use of Currency Pipe in Angular
In this blog post, we’ll learn about Currency Pipe in Angular.
We all know how much we struggle for making a number format precise when we have to show currency based on the country and their respective currencies.
We have to add an appropriate currency icon and show commas separated values with 2 decimal fixed values. We have to run the Pricing number through certain functions and write code to add commas and currency icons.
Angular here makes it handy by providing a Built in Mechanism that we all know is Pipes which is used for formatting data. Angular has a bunch of pipes currency pipe angular is one of them. Angular has a Currency Pipe built in we just have to use it according to our needs.
CurrencyPipe is an API provided by angular. It is part of the angular CommonModule.
It transforms a number to a currency string, according to locale rules that determine sizing, separator, decimal-point characters, and other locale-specific configurations.
Syntax of Currency pipe Angular :
{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}
Example:
app.component.ts
price: number = 10050.4521;
app.component.html
{{ price | currency }} //output $10,050.45
This is the basic method of using a currency pipe, the default Currency code for this pipe is 'USD'. But this default is Deprecated from Angular version 9. But you can still set it as default by providing as providers for this pipe as follows:
{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}
There are other examples as well which you could use according to your needs and configurations
app.component.ts
a: number = 0.259;
b: number = 1.3495;
app.component.html
<p>A: {{a | currency}}</p>
<!--output '$0.26'-->
<p>A: {{a | currency:'CAD'}}</p>
<!--output 'CA$0.26'-->
<p>A: {{a | currency:'CAD':'code'}}</p>
<!--output 'CAD0.26'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
<!--output 'CA$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
<!--output '$0,001.35'-->
<p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
<!--output '0 001,35 CA$'-->
<p>B: {{b | currency:'CLP'}}</p>
<!--output 'CLP1' because CLP has no cents-->
Angular currency pipe without symbol
If you want to show numbers in currency format without the symbol, or you want to use a currency pipe without a symbol use the below format:
<p> {{ b | currency:'USD':'' }} </p>
<!--output 1.35 -->
Angular currency pipe INR
If you want to show currency in Indian rupees, Use angular currency pipe INR.
<p> {{ b | currency:'INR' }} </p>
<!--output ₹1.35 -->
Angular currency pipe without decimal
Use angular currency pipe without a decimal point with this format
<p> {{ b | currency:'USD':true:'1.0-0' }} </p>
<!--output $1 -->
If you want to show currency without decimal points, using an angular currency pipe without decimal points won't work you should use the number pipe instead, if you need just numbers use this below format.
<p> {{ b | number:'1.0-0' }} </p>
<!--output 1 -->
Angular currency pipe in component
Below is the code to use the angular currency pipe in the component. You have to import it and pass it into with providers inject it via the constructor and it's ready to use.
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CurrencyPipe } from '@angular/common';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ CurrencyPipe ]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
priceString:String = '100';
price:any;
constructor(private currencyPipe:CurrencyPipe){
this.price = this.currencyPipe.transform(this.priceString);
}
}
app.component.html
<p> This is angular currency pipe used in component {{price}} </p>
<!--output This is angular currency pipe used in component $100.00 -->
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
Angular Currency Pipe FAQ
What is Currency Pipe in Angular
Angular Currency Pipe is one of the built in pipes in Angular used to format currency value according to given country code, currency, decimal, locale information.
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.
How to add CurrencyPipe in TypeScript File
Below is the code to use the angular currency pipe in component. You have to import it and pass it into with providers inject it via constructor and its ready to use.
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CurrencyPipe } from '@angular/common';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [ CurrencyPipe ]
})
export class AppModule { }
app.component.ts
import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
priceString:String = '100';
price:any;
constructor(private currencyPipe:CurrencyPipe){
this.price = this.currencyPipe.transform(this.priceString);
}
}
Angular format Currency
<p>A: {{a | currency}}</p>
What is the default value of symbol display while using the currencypipe
{{ price | currency }} //output $10,050.45
This is the basic method of using a currency pipe, the default Currency code for this pipe is 'USD'. But this default is Deprecated from Angular version 9. But you can still set it as default by providing as providers for this pipe as follows:
{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}
How do you use currency pipe in input type?
<input type="text" value="">
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
Hope you have now understood the use of angular currency pipe
Below all for currency pipe in angular are listed here: Currency Pipe in Angular
Currency pipe in typescript
Currency pipe in Angular example
Indian currency pipe in Angular 6
Currency pipe in angular stackblitz
Currency pipe angular without symbol
Angular format currency in typescript
Currency pipe example
Happy Coding!