ngx-localized-numbers

library to localize numbers and currency with angular

Supported Locales
Installation
Usage
Define additional locales

Compatible versions with angular

>= 2.0.0: angular 12/13
>= 1.0.0 & < 2.0.0: angular 11
>= 0.4.0 & < 1.0.0: angular 10
0.3.1: angular 7-9

Supported Locales

The following locales are currently supported by ngx-localized-numbers:

cs_CZ
da_DK
de_AT
de_CH
de_DE
de_LU
el_GR
en_AU
en_CA
en_GB
en_HK
en_IE
en_IN
en_MY
en_NZ
en_TH
en_US
en_ZA
es_AR
es_CO
es_ES
fi_FI
fr_BE
fr_CA
fr_CH
fr_FR
fr_LU
ga_IE
hu_HU
is_IS
it_CH
it_IT
ja_JP
ko_KR
nl_BE
nl_NL
no_NO
pl_PL
pt_BR
pt_PT
ro_RO
ru_RU
sk_SK
sv_SE
th_TH
tr_TR
zh_CN
zh_HK
zh_TW

Installation

First you need to install the npm module:

npm install ngx-localized-numbers --save

Usage

Import into application

First you need to import the module as forRoot() into your parent module:

import { NgxLocalizedNumbers } from 'ngx-localized-numbers';
@NgModule({
  imports: [
    // ...
    NgxLocalizedNumbers.forRoot()
  ]
  // ...
})
export class AppModule {}

If using submodules you may need to include the module there as well:

import { NgxLocalizedNumbers } from 'ngx-localized-numbers';
@NgModule({
  imports: [
    // ...
    NgxLocalizedNumbers
  ]
  // ...
})
export class AnyOtherModule {}

Shared module

If you are using a SharedModule which is imported into different other application modules, you may export it from here so you do not need to import it in every child module.

Set the locale

The locale can be set as follows (and anywhere else as well):

@Component({
  // ...
})
export class AppComponent implements OnInit {
  constructor(private localizedNumbersService: NgxLocalizedNumbersService) {}

  ngOnInit() {
    this.localizedNumbersService.setLocale('de_DE');
  }
}

That's it, now you can use the localization.

Format numbers and amounts

There are two pipes included in this modules you may use (also chained usage is possible). These samples use the de_DE as locale:

formatNumber - Pipe

This pipe formats numbers with thousand separator and decimal separator from the locale. As a parameter, the amount of decimals can be provided:

<p>{{1000 | formatNumber:3 | formatCurrency}}</p> - prints 1.000,000 €

<p>{{1000 | formatNumber:2}}</p> - prints 1.000,00

<p>{{1000.47 | formatNumber:2}}</p>

<p>{{1000.47 | formatNumber:1}}</p>

<p>{{1000.9 | formatNumber}}</p>

<p>{{1000.1 | formatNumber:5}}</p>

formatCurrency - Pipe

This pipe will add the locales' currency to the number.

<p>{{1000 | formatCurrency}}</p> - prints 1000 €

or combine both pipes:

<p>{{1000 | formatNumber:2 | formatCurrency}}</p> - prints 1.000,00 €

Define additional locales

You also may add or overwrite locales to the service:

this.localizedNumbersService.addLocale('en_US', {
  thousandSeparator: ',',
  decimalSeparator: '.',
  whitespaceBeforeCurrency: true,
  currency: '$'
});

feel free to add missing locales via a PR, thanks! (see src/locales.config.ts)