Does Angular number pipe translate numbers to Arabic?

Question

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!

Answer 1

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