Configure Your Angular App for Indian Currency Formatting

Published On: Oct 9, 2019

A quick post on how to configure an Angular App that displays currencies formatted in Indian locale with symbol

You can configure the Indian locale application wide by registering the en-IN locale using registerLocaleData() in the app.module.ts. You can also enable this only for a particular module by registering the locale in the specific module file.

In app.module.ts:

import { registerLocaleData } from '@angular/common';
import localeIn from '@angular/common/locales/en-IN';

And in your template (html) file, apply the currency pipe with following arguments:

In home.component.html:

{{ amount | currency :'INR' : 'symbol' : '1.2-2' : 'en-IN' }}

Hint: the Currency pipe syntax used here is:

{{ value | currency : currencyCode : symbol : {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} : locale }}

This is how the formatted currency fields look like:

Angular Currency Formatting In INR

You can find more details on the CurrencyPipe in the official Angular docs.

See Also