How to set locale for numbers in angular 2.0

Question

The number format in Swiss German is like "100'000.00" (not "100,000.00"). How can I change that? I tried to change the settings in number_pipe.js from en-US to de-CH without success.

var defaultLocale: string = 'de-CH';

Is there a workaround or do I have to implement my own pipe?

Answer 1

Try using the locale-number.pipe.ts or

you could create a simple pipe based on NumeralJs to format numbers

https://github.com/adamwdraper/Numeral-js

Answer 2

If you only need one locale for your app, you can as of now (@angular ~2.4.0) register the locale provider in @NgModule.

@NgModule({
    ...
    providers: [
        {provide: LOCALE_ID, useValue: "de-CH"}
    ]
})
export class AppModule {}

Answer 3

Following is the my solution and it will help to someone.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'amountConverter'
})
export class AmountConverterPipe implements PipeTransform {

  transform(value: number | string, locale?: string): string {
    return new Intl.NumberFormat(locale, {
      minimumFractionDigits: 2
    }).format(Number(value));
  }

}

In the html you can use as follows

 <span class="strong">{{Price  | amountConverter:locale}}</span>

Number format will change according to value of locale.

Please refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat for more detail.

Answer 4

The best option for me was the famous https://www.npmjs.com/package/numeral package. (he works with same logical of the moment.js)

To install it: npm i numeral@2.0.6 and with types npm i --save-dev @types/numeral@0.0.22

At your ts file you can use as follow:

`R$ ${numeral(<your-model-value>).value().toLocaleString()}`

For HTML template you can create a Pipe like this:

import {Pipe, PipeTransform} from '@angular/core';
import * as numeral from 'numeral';

@Pipe({
  name: 'numberLocale'
})
export class NumberLocalePipe implements PipeTransform {

  transform(value: any, args?: any): any {

    const numeralNumber = numeral(value);

    return numeralNumber.value().toLocaleString();
  }
}

Additionally, for currency (and locales) a good strategy is use the package ng2-currency-mask for currency masks in HTML (but on ts files you may should "translate" the binded value in the model with numeral before save your model object.

Using ng2-currency-mask on HTML Template:

<input [(ngModel)]="model.value"
   [options]="{ prefix: 'R$ ', thousands: '.', decimal: ',' }"
   allowNegative="false" currencyMask>

And on ts before save the model:

if(this.model.value)
   this.model.value = numeral(this.model.value).value();

https://github.com/cesarrew/ng2-currency-mask