Open In App

What is CurrencyPipe in Angular 10 ?

Last Updated : 03 Jun, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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:



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads