Do you add multilingual support (Angular)?

Last updated by Tom Bui [SSW] 4 months ago.See history

How to implement multilingual support in an Angular project?

There are several ways of implementing multilingual support in an Angular project, the following libraries are popular:

Internationalization (i18n): the standard Angular built-in module to help the application dealing with multilingual. It creates multiple language versions of your application.

ngx-translate: a library enhanced the Angular built-in feature, it supports not only template translations but can also be used in the code by APIs.

angular-gettext: the simplest powerful 3rd party library providing translation support to Angular.

The following table shows the pros and cons of the 3 libraries:

Pros (+) Cons (-)
Internationalization (i18n)
  • Better support of displaying dates,
  • Better support for handling plural forms of words, and alternative text.
  • It only works with one language at a time, you have to completely reload the application to change the language
  • Only support translation in the template (by using HTML tag)
  • You need to build + deploy every time you make a change to the language, and you have to have a separate folder every time.
  • You can see the language in the URL.
  • It provides more powerful API support
  • It supports JSON files by default to store the translation resources
  • It doesn’t provide good support for plural forms and dates.
  • Ngx-translate will stop its releases when angular built-in modules catch up with the ngx-translate features.
  • The developer said that when Angular i18n catches up the library will be deprecated. Check article.
angular- gettext
  • The simplest library to deal with multilingual.
  • Supports plural handling in different languages.
  • It compiles the translations during the compiling period, which doesn’t support the change of translation at any time.
  • Only supports AngularJS

Ngx-translate provides the APIs which you can use to translate the resources in the code:

code 1

code 2

By comparing the 3 libraries we can see ngx-translate provides the best functionality now due to the API support, even though the built-in i18n module will catch up at a certain time, but we still recommend using ngx-translate for multilingual support in your Angular application.

The future…

Since Angular 9, they now have built-in support for i18n which is called Angular Localized, it is expected that over time, Angular Localize will become the most popular (see the yellow line on Google Trends increase).

angular trends
Figure: It is expected that the yellow line will become the dominant internationalization tool for Angular

We open source. Powered by GitHub