Skip to content
Related Articles

Related Articles

Improve Article

What is CurrencyPipe in Angular 10 ?

  • Last Updated : 03 Jun, 2021

In this article, we are going to see what is CurrencyPipe in Angular 10 and how to use it. CurrencyPipe is used to transform a number to a currency string, formatted according to locale rules that determine group sizing and separator, decimal-point character


{{ value | currency }}


  • Create the Angular app to be used
  • There is no need for any import for the currencyPipe to be used
  • In app.component.ts define the variables that take the currency value.
  • In app.component.html use the above syntax with the ‘|’ symbol to make the currency element.
  • Serve the angular app using ng serve to see the output


  • currencyCode: It takes a string
  • display: It takes a string or boolean
  • digitsInfo: It takes a string
  • locale: It takes a string

Example 1:


import { Component } from '@angular/core';
    selector: 'app-root',
    templateUrl: './app.component.html'
export class AppComponent {
  // Currency variable to be used
  a = 100;


<!-- Default currency is in Dollars-->
<p>A: {{a | currency}}</p>
<!-- INR CurrrenyCode is used for Rupees symbol-->
<p>A: {{a | currency:'INR'}}</p>
<!-- INR CurrrenyCode is used-->
<p>A: {{a | currency:'INR':'code'}}</p>
<!-- EUR CurrrenyCode is used for Europeon Currency-->
<p>A: {{a | currency:'EUR'}}</p>


My Personal Notes arrow_drop_up
Recommended Articles
Page :