Does Angular number pipe translate numbers to Arabic?

user_10292009 0
Viewed 2276

I am building an Angular v9 app that requires translating into a few different languages including Arabic. I believe the project is set up correctly using ar-SA as one of the locale ID's, however even though I am using the number pipe across the app the numbers are not displaying in Arabic as I would expect. The date pipe is translating days and months but not the numbers either.

In app.module.ts

import localeAr from '@angular/common/locales/ar-SA';


registerLocaleData(localeAr);

In angular.json

"ar-SA": {
              "localize": ["ar-SA"],
              "i18nFile": "src/locale/messages.ar.xlf",
              "i18nFormat": "xlf",
              "i18nLocale": "ar-SA",
              "i18nMissingTranslation": "warning"
            }

Any help would be much appreciated!

angular locale pipe internationalization
4 Answers

If not, you can write your own pipe like this:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'anp'})
export class ArabicNumberPipe implements PipeTransform {

  transform(n: number): string {
    if (n === null || n === undefined) {
      return '';
    }
    return new Intl.NumberFormat('ar-SA',{}).format(n);
  }
}

You will find the documentation of the used formatter here: Intl/NumberFormat

user_52190680

I am using a pipe that converts all numbers in a string from English numbers (1,2,3 .. ) to Arabic Numbers ( ١,٢,٣ ... )

numbersObject: { [x: string]: string } = {
    '1': '١',
    '2': '٢',
    '3': '٣',
    '4': '٤',
    '5': '٥',
    '6': '٦',
    '7': '٧',
    '8': '٨',
    '9': '٩',
    '0': '٠',
  };

  transform(n: number | string): string {
    if (n === null || n === undefined) return '';
    n = n + ''; // to make it a string if it was a number 
    let newString = '';
    for (let i = 0; i < n.length; i++) {
      if (this.numbersObject[n.charAt(i)])
        newString += this.numbersObject[n.charAt(i)];
      else
        newString += n.charAt(i);
    }

    return newString;
  }
user_116912440
user_98347150

an answer was already accepted but I will post this anyway as you might be interested in this package. https://www.npmjs.com/package/angular-translate-numbers

here is the demo https://stackblitz.com/edit/angular-translate-numbers

it supports multi numeral types like

Arabic ,Gujarati , Gurmukhi, Bengali , Assamese, Kannada , Odia, Malayalam , Telugu, Burmese , Tibetan, Mongolian , Sinhala, Khmer , Thai, Lao , Javanese, Arabic_Western , Latin, Cyrillic , Greek, Arabic_Hindi , Arabic_Eastern, Persian , Pashto, Dari , Urdu, Shahmukhi , Brahmi, Devanagari

It also supports converting numbers in dates like

{{ date | date: 'yyyy-MM-dd mm:ss' | translateNumbers: NumberTypes.Arabic }}

NumberTypes : is The LanguageType Enum that u can import into your component

user_32081700
Related