Angular Pipes FrontendDevelopment

Angular Pipes and localization

What are pipes? For people who have worked with Angular version one, pipes are the new filters. You use pipes to format data. For example if you want to format a date you can use the built in date pipe. The above code will result in the following output 2016-12-28.

2 min read

What are pipes? For people who have worked with Angular version one, pipes are the new filters. You use pipes to format data. For example if you want to format a date you can use the built in date pipe.

The above code will result in the following output 2016-12-28. Now this is great ,but real world applications should support different cultures. When a user from the US uses your application the date should be formatted in 'yyyy-dd-MM' and when the user is from Belgium is should be 'yyyy-MM-dd'. This is what we call localization.

What is localization again?

Let's get back to basics. Localization is the process of adapting your product to a specific locale or market. One of the elements of the localization process is translation meaning you make your product or content available in the language of your market.

Another aspect is that your application supports the local culture meaning how are numbers and dates formatted. This can be very different depending where you are in the world.

If you ever want to launch an application in Belgium, it should be translated in three languages: Dutch, French and English. Dutch for the Flemish part, French for Walloon and English because you also want to attract visitors of other countries.

Now let's take our example back. If we look at the example code we format the date for people who are familiar with the format. You can already guess where the problem lies. Users who have other formats will be confused.

Wouldn't it be nice if we just could configure the local culture? Luckily in Angular version two we can specify the locale we like to support. By default the locale in Angular two is 'en-US'. You can check it here.

The benefits of open source ;-). Now we have a problem if you want to launch your application in a non US country. Your visitors probably don't to use the 'en-US' locale.

In Angular you can configure your locale in the module configuration by providing the LOCALE_ID. Take a look at the following code:

You can see in the providers section that I provide the locale "nl-BE". This is the ISO culture code for Belgium for the Dutch speaking people. You also have "fr-BE" for the French speaking people. Belgium can be a complicated country :-). If you don't know your culture you can always look it up here.

Please note that this is demo code and in a real world application you will have to fetch the culture to see which cultures your user uses.

Now, if run our code once again you will see the following:

On the first line you will see that I didn't using any formatting. The output that you see is a plain old JavaScript date object.
If we remove the LOCALE_ID we will see that the application will use the default 'en-US':

There is still one more thing I need to clarify. Both pictures show euro as currency symbol. The reason this is shown is that you need to pass the symbol as an argument when using the currency pipe. It's not because you choose 'nl-BE' culture that the currency symbol will be EUR by default.

That's all! You can find the repository with the example code here. I hope you enjoyed this post.

Share This Post