Skip to content
Related Articles
Get the best out of our app
Open App

Related Articles

What is CurrencyPipe in Angular 10 ?

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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
Last Updated : 03 Jun, 2021
Like Article
Save Article
Similar Reads
Related Tutorials