Angular forms formatCurrency Directive

In this article, we are going to see what is formatCurrency in Angular 10 and how to use it. The formatCurrency is used to format a number as currency using locale rules.

Syntax:

formatCurrency(value, locale, currency, currencyCode, digitsInfo)

Parameters:

• value: The number to format.
• locale: A locale code for the locale format.
• currency: A string containing the currency symbol or its name.
• currencyCode: the currency code.
• digitsInfo: Decimal representation options.

Return Value:

• string: the formatted currency code.

NgModule: Module used by formatCurrency is:

• CommonModule

Approach: 

• Create the Angular app to be used.
• In app.module.ts import LOCALE_ID because we need locale to be imported for using get formatCurrency.

  import { LOCALE_ID, NgModule } from '@angular/core';

• In app.component.ts import formatCurrency and LOCALE_ID
• inject LOCALE_ID as a public variable.
• In app.component.html show the local variable using string interpolation
• Serve the angular app using ng serve to see the output.

Example 1:

import {
  formatCurrency
 }
  from '@angular/common';

import {Component,
  Inject,
  LOCALE_ID }
  from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatCurrency(10,this.locale,
          'USD');
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}

<h1>
  GeeksforGeeks
</h1>

<p>Locale Currency is : {{curr}}</p>

Output:

Example 2:

import {
  formatCurrency
 }
  from '@angular/common';

import {Component,
  Inject,
  LOCALE_ID }
  from '@angular/core';

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatCurrency(10,this.locale,
          'INR');
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}

<h1>
  GeeksforGeeks
</h1>

<p>Locale Currency is : {{curr}}</p>

Output:

Reference: https://angular.io/api/common/formatCurrency