Use of Currency Pipe in Angular

cover-photo

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 country and their respective currencies.

We have to add 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 use for formatting data. Angular have a bunch of pipes currency pipe angular is one of them. Angular have 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 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 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 an 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 number in currency format without the symbol, or you want to use currency pipe without symbol use 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 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 angular currency pipe without decimal point wont work you should use the number pipe instead, if you need just number use this below format.

<p> {{ b | number:'1.0-0' }} </p>
<!--output 1 -->


Angular currency pipe in component

Below is the code to use 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);
  }
  
}

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 -->



Hope you have now understood the use of angular currency pipe

Happy Coding!