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:

What is CurrencyPipe in Angular 10 ?

Explore