How to format number based on user locale in angular 2

Question

How to format number based on user locale in angular 2

Example - If the user locale is German (Germany) then the number is displayed as 1.234,56

Answer 1

There already is a function available in JavaScript. You can just call it. 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 store this locale's in some constant file & play around it.

Answer 2

You can create a filter that you can use throughout your application when displaying numbers.

Creating a filter:

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>