CODEWITHSUNDEEP
angularinternationalizationpipelocale
ifancyabroad
ifancyabroad

Reputation: 43

Does Angular number pipe translate numbers to Arabic?

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!

Upvotes: 3

Views: 4354

Answers (4)

AhmAD
AhmAD

Reputation: 126

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

Upvotes: 0

Ahmed
Ahmed

Reputation: 581

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;
  }

Upvotes: 2

Darpan
Darpan

Reputation: 244

you can pass the format along with the pipe you are using.

https://github.com/angular/angular/blob/master/packages/common/locales/ar-SA.ts

Above is the link for formats you can use for dates. These are the supported formats ['d\u200f/M\u200f/y', 'dd\u200f/MM\u200f/y', 'd MMMM y', 'EEEE، d MMMM y'],

like 'dateVariableFromts' | date: format

Upvotes: 0

Marc
Marc

Reputation: 1896

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

Upvotes: 6

Related Questions