Cómo formatear el número según la configuración regional del usuario en angular 2
Ejemplo: si la configuración regional del usuario es alemana (Alemania), el número se muestra como 1.234,56
Ya hay una función disponible en JavaScript. Puedes simplemente llamarlo. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString
Ejemplo :
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, eg 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,789Simplemente puede almacenar esta configuración regional en algún archivo constante y jugar con ella.
Puede crear un filtro que puede usar en toda su aplicación al mostrar números.
Creando un filtro:
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 } }Uso en HTML:
<div> <span class="qty">{{ number | formatNumber }} </span> </div>