Application internationalization is focused on making applications available and user-friendly to a worldwide audience. There are built-in tools or a third party library available to do the Internationalization in your angular application.

When you go with the built-in(i18n) Angular tools for your app localization, there is a second decision to make: do you want to use the Ahead-of-Time (AOT) compiler or the Just-in-Time (JIT) compiler. With AOT, your application can be served fast and your users profit from a better performance. As a disadvantage, you need to serve an application for each locale due to the fact that all the information, including the content, is built-in when compiling the app. The decision of which language should be shown to the users needs to happen with server side logic or by URL parameters. If you go for JIT, translations are dynamic but you need to take care to provide the translations in your application. However, keep in mind that, in this case, the performance might decrease.

There is also the option to choose a third-party library for internationalization. Today we will discuss and use one of the most popular libraries ngx-translate . The library can be used for both JIT and AOT compiled versions of your app.

ngx-translate is an internationalization library for Angular which tries to close the gap between the missing features of the built-in internationalization functionalities.

Create Angular 4+ project

We use @angular/cli  to create a new project named translation-app  in the terminal:

Setup the project

Use the following commands to install and load ngx-translate  library. Use npm in your terminal within the project folder Translation-App

import the necessary modules into main module app.module.ts  :

Add a function in app.module.ts, that returns a TranslateHttpLoader  and export it (needed by AoT). In this case the HttpLoaderFactory  function we create, returns an object that can load translations using Http and .json, but you could write your own Class that, for example, uses a global JavaScript variable instead of loading a file, or that uses Google Translate:

Now we need to import our modules into the @NgModule , which tells Angular to load this Module into your AppModule :

Inject the TranslateService

In app.component.ts  we now import and init the TranslateService :

Then inside the AppComponent  Class we inject the translate service and provide our default language.

Create .json translation files

We now create our translation files inside the assets/i18n folder:

src/assets/i18n/en.json

src/assets/i18n/fr.json

These are simple .json files that will be loaded by our TranslateHttpLoader we created in app.module.ts .

Translate simple title and intro

In app.component.html we add a header with the translate  directive inside the h1  tag. This directive will take the text inside the tag and replace it with the matching translation. If you use the directive you have to make sure, that there is nothing else inside the tag but the text.

As a second example we use the TranslationPipe  to translate a label with define as a inline string. As we sometimes have value inside a translation that we want to replace, we can pass a data object into the translate  pipe.

Integrate language switcher

In app.component.ts  now we add a language switcher function to switch the language.

We can now attach our language switcher function that we have just defined in app.component.ts  to a button. In this case we create a button for each language and call the switchLanguage()  function with the matching language key.

Translate sentence with variable

As mentioned before, you sometimes have sentences to that contain variable. In this little example we have a user object with age and name inside the app.component.ts , and we want to translate a sentence that will contain this values:

Because we pass this object into the translate  pipe, we can now use it’s properties in our translation with the {{ placeholder }} notation.

src/assets/i18n/en.json

src/assets/i18n/fr.json

Using nested .json objects

If you want to be able to have more control on your translation, and for example translate page blocks (from the end-user perspective) or components (from the developer perspective), one solution could be the following; use nested .json objects. An example could look like this in the -json files:

src/assets/i18n/en.json

src/assets/i18n/fr.json

And in the corresponding template app.component.html :

That’s it.

Now you have a basic idea of how to use localization in your angular application using third party library ngx-translate .

For the complete code you can find the github  link here.