What is CurrencyPipe in Angular 10 ?

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: