How to format number based on custom locale in angular 2
2 answers
JavaScript already has a function. You can just call. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
Example:
var number = 123456.789;
// German uses comma as decimal separator and period for thousands
console.log(number.toLocaleString('de-DE'));
// → 123.456,789
// Arabic in most Arabic speaking countries uses Eastern Arabic digits
console.log(number.toLocaleString('ar-EG'));
// → ١٢٣٤٥٦٫٧٨٩
// India uses thousands/lakh/crore separators
console.log(number.toLocaleString('en-IN'));
// → 1,23,456.789
// the nu extension key requests a numbering system, e.g. Chinese decimal
console.log(number.toLocaleString('zh-Hans-CN-u-nu-hanidec'));
// → 一二三,四五六.七八九
// when requesting a language that may not be supported, such as
// Balinese, include a fallback language, in this case Indonesian
console.log(number.toLocaleString(['ban', 'id']));
// → 123.456,789
You can just save this language in some permanent file and play around with it.
+3
source to share
You can create a filter that can be used throughout the application when displaying numbers.
Filter creation:
angular.module('myApp', [])
.filter('formatNumber', function() {
return function(input) {
// Get the locale using any technique
var locale = window.navigator.language;
if (locale == 'GERMANY') { // test code, replace with your logic
return // German formatted number
else
return // defaults
};
})
Angular 2:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'formatNumber'})
export class FormatNumberPipe implements PipeTransform {
transform(value: string, args: string[]): any {
if (!value) return value;
// Get the locale using any technique
var locale = window.navigator.language;
if (locale == 'GERMANY') { // test code, replace with your logic
return // German formatted number
else
return // defaults
}
}
Usage in HTML:
<div>
<span class="qty">{{ number | formatNumber }} </span>
</div>
0
source to share