AngularJS – Custom filter to show Arabic numbers

AngularJS custom filter to show Arabic numbers for multilingual AngularJS applications

AngularJS – Custom filter to show Arabic numbers

Today we will create custom AngularJS filter to convert English numbers into Arabic numbers, which is useful for RTL AngularJS applications and multilingual AngularJS applications also.

AngularJS provides filters components, which help you manipulate your HTML binding data.
You can use filters to format dates, currencies and more.

An example of what AngularJS filter can do you can imagine you have retrieved a date from your database and you want to render it.
In many cases, the returned dates will be shown in milliseconds format like this 1400956671914

so you can’t show it to a user in this un-friendly way

Using AngularJS filter you can start adding the date filter and choose date formate in this way

This results in a user-friendly date formate as following 28-03-2017

To read more about AngularJS filters check this resources:

Filter components in AngularJS

Custom AngularJS filter

AngularJS has a .filter() method for each Module, so we will add a custom filter to convert Latin script (English) numbers to Arabic numbers.

Start with creating you Angular App, then you can attach the filter module to your app

It’s easy as you can see we pass the filter name ‘ngArabicNumber, then return a function which allows us to keep watching the binding values.

Next, we want to define what English and Arabic numbers should be to map every English number to it’s corresponding Arabic one.

Also, you can see we have added a passed variable to our function which is the English number we want to convert, and from your views, you can handle this using the way we have used in date filter

assuming that myNumber is a pre-defined value in your controller

Then, we can return to our filter to handle the mapping part

First, convert the number to a string and set-up a for loop to handle mapping the numbers using RegExp

You have an Arabic number stored in your variable ‘numberToString’, what we have to do next is to return it back to the binding DOM

Notice that now your view will always show an Arabic number instead of the English one, but what if you are working on multilingual AngularJS applications so you have to handle when you need to convert the number to Arabic and when to shows it as English number.

Handle the filter for multilingual AngularJS applications

Thanks to Angular Filter you can perform your transitional filter based on an evaluated condition, so in our case, we need to convert the English number into Arabic number only when the user changes his locale to Arabic

Start by editing your views to be like this

:(lang == 'ar') is a condition which detects do we have to apply the ngArabicNumber filter or not.

Now, go to our created filter to pass this condition

It is clear to see that what we have updated in our filter, we have told the filter to convert the English number into Arabic number only if ‘User locale is Arabic’ else we will return the English number as it’s.

you can see a demo on codepen for this here with some enhancement

You can check more resources for how to create custom filters here:

Everything about custom filters in AngularJS
Building Custom AngularJS Filters
Filters from A better way to learn AngularJS @ thinkster.io

No Comments

Sorry, the comment form is closed at this time.