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?
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
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 {}
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.
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