In this post, I’m going to talk about internationalization and how to implement it in an Angular application with the help of a neat library called Transloco.

What is Internationalization (I18N)?

I think it’s best to start by explaining what internationalization (i18n for short - first letter of the word followed by the number of letters until the last letter of the word) is and why it is so important.

Internationalization is the process of adapting a software application to allow it to be easily used in multiple countries. There is a common misconception that this means that all text within an application must have translations for multiple languages; however, full i18n goes beyond just plain text in your application.

In many western countries, red is commonly used to signal danger. However, in some regions throughout the world, red is seen as a positive color.

Likewise, in many western countries, text is read from left to right; however, in some languages text is read from right to left.

Another example of where i18n comes into play is in images. If an image in your application contains text, to fully support i18n, it may be appropriate to generate multiple images each with the correct translations for the languages you support in your application. You would then need to serve the correct image depending on what country the user using your application is located in.

Naomi Meyer gave a brilliant talk on this subject at AngularConnect. You can watch that talk here if you are interested in learning more about. It’s worth watching!

What is Transloco?

Transloco is a library developed and maintained by the NgNeat team. It contains a multitude of features and officially supported plugins to help make translating your Angular applications easy, maintainable, scalable and performant. It is actively maintained and it supports:

• Lazy loading
• Multiple fallbacks
• Server-side rendering
• Localization (l10n)
• Runtime language changing
• Multiple languages simultaneously
• Pluralization (through an official plugin)

It’s very easy to set up and use as we’ll see in the next part of this post!

#angular #web-development