Angular Apps for a Global Audience

Application internationalisation(i18n) is focused on making applications available and user-friendly to a worldwide audience. You can localise your angular app using built in tools or third party libraries too.

When you go with the built-in Angular i18n tools for your app localisation, 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 internationalisation. 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 internationalisation library for Angular which tries to close the gap between the missing features of the built-in internationalisation functionalities.

Create Angular 4+ project

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

ng new translation-app

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

npm install @ngx-translate/core
npm install @ngx-translate/http-loader

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 Introduction

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 that contain variables. In this little example we have a user object with age and name properties inside the app.component.ts , and we want to translate a sentence that will contain these 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 now update in the corresponding template app.component.html :

That’s it. You now have a basic understanding of how to use localisation in your Angular app. Go engage with the world!

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

Originally published at blog.imaginea.com.