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

Syntax:

{{ value | currency }}

Approach: 

  • 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

Parameters:

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

Example 1:



app.component.ts




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

app.component.html




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

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :