Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

387
Views
How to format number based on user locale in angular 2

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

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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.

over 4 years ago · Santiago Trujillo Report

0

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>
over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!