Open In App

Angular forms formatCurrency Directive

Improve
Improve
Like Article
Like
Save
Share
Report

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:

app.component.ts




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,){}
}


app.component.html




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


Output:

Example 2:

app.component.ts




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,){}
}


app.component.html




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


Output:

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



Last Updated : 02 Jun, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads