Do you add multilingual support (Angular)?

Last updated by Gilles Pothieu [SSW] about 2 months ago.See history

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.


Video: Introduction to Internationalization in Angular (13mn)

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

Pros (+) Cons (-)
Internationalization (i18n)
  • Better support of displaying dates,
  • Better support for handling plural forms of words, and alternative text.
  • Runtime language switching support (since Angular 9+)
  • More complex setup initially
  • You can see the language in the URL.
ngx-translate
  • It provides more powerful API support
  • It supports JSON files by default to store the translation resources
  • Simple runtime language switching
  • It doesn't provide good support for plural forms and dates.
  • Third-party dependency that may not keep up with Angular updates.

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

Angular's built-in i18n has significantly improved since Angular 9 with runtime language switching capabilities. Both solutions are viable, with Angular i18n being the recommended approach for new projects due to its official support and comprehensive features, while ngx-translate remains a good option for projects requiring simpler setup or existing implementations.


Adam Cogan
Shane Ye
Gabriel George
Sebastien Boissiere
We open source.Loving SSW Rules? Star us on GitHub. Star
Stand by... we're migrating this site to TinaCMS