Angular forms formatCurrency Directive

Last Updated : 23 Jul, 2025

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