Implementing Internationalization (i18n) and Localization (l10n) in Angular using ngx-translate

As web applications continue serving an ever-expanding global audience, the need for internationalization and localization has become more apparent and important all along. Angular, one of the most popular web application frameworks, provides some robust features that simplify these tasks.

Fig: Implementing Internationalization (i18n) and Localization (l10n) in Angular using ngx-translate

In this article, we’ll take a deep dive into the process of implementing i18n and l10n in an Angular application. We’ll use Angular’s built-in i18n module alongside its ngx-translate library for more dynamic translation scenarios.

Before we begin, let’s define what internationalization and localization mean.

Internationalization (i18n): This is the process of designing and preparing your app to be usable in different languages. You extract text from your app and make it available for translation.

Localization (l10n): This is the process of translating your internationalized app into specific languages for particular locales.

Angular’s Internationalization Features

Angular has robust built-in features to support i18n:

• Angular i18n Package: Angular’s core internationalization package provides tools and techniques for embedding and extracting translations within your templates.
• ngx-translate Library: A community-driven solution that provides an API for translations and allows more dynamic translations than Angular’s i18n.

Setting up Angular for Internationalization

Step 1: Set Up Your Angular Project

If you haven’t done it already, you’ll need to create a new Angular project using Angular CLI:

ng new my-i18n-app

Step 2: Prepare Your Application for Internationalization (i18n)

1. Install @angular/localize package:

You must add the @angular/localize package to enable advanced localization features in your project. To do so, run the following command in your project directory:

ng add @angular/localize

1. Add i18n attributes to your templates:
   Angular uses the i18n attribute for marking text to be translated. Let’s add some text to translate into our app.
   Here’s how you can add i18n attributes in your Angular application:
   1.Open the HTML template file where you want to add internationalization (i18n) attributes.
   2. Identify the text content that needs to be translated.
   3.Add the i18n attribute to the HTML element containing the text to be translated.
   4.Optionally, provide an identifier for the text using the i18n attribute’s value. This identifier helps Angular’s localization tooling manage translations.
   Here’s an example:

<h1 i18n="@@homeTitle">Hello, world!</h1>

The @@homeTitle is an optional identifier for this particular message.

2. Update angular.json for i18n configuration:

Open the angular.json file in the root of your project and configure i18n settings under the ‘i18n’ property.

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf"
    // Add other locales as needed
  }
}

Specify the source locale(default is English, “en”) and locales for which you want to provide translations as shown above.

Step 3: Extracting the Text with Angular CLI

Once you have added i18n attributes to all the text that needs to be translated, you can use the Angular CLI to extract these texts into a translation source file:

ng xi18n --output-path src/locale

This command generates a messages.xlf file in the src/locale directory.

Step 4: Translate the Extracted Text

Edit the messages.xlf file and add translations for the target element:

<trans-unit id="homeTitle" datatype="html">
  <source>Hello, world!</source>
  <target>Hola, mundo!</target>
</trans-unit>

You can create new .xlf files such as messages.es.xlf for Spanish, messages.fr.xlf for French, and more for additional languages.

Step 5: Configure Your Build Process

Configure the Angular CLI to use the translation file in the build process:

ng build --configuration=fr

For this to work, you’ll need to add the following configuration in the angular.json file:

"configurations": {
  "fr": {
 "aot": true,
 "outputPath": "dist/my-i18n-app-fr/",
 "i18nFile": "src/locale/messages.fr.xlf",
 "i18nFormat": "xlf",
 "i18nLocale": "fr",
 "i18nMissingTranslation": "error",
  }
}

Implementing ngx-translate for Dynamic Translations

While Angular’s built-in i18n solution is great for static content, for dynamic content, we should use the ngx-translate library.

This will allow us to implement a dropdown or similar solution for users to switch languages efficiently, and when a user selects a language, load the appropriate translation file and update the UI using the TranslateService from ngx-translate.

Here’s how we can achieve this:-

First, install the library:

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

Next, import TranslateModule in your app.module.ts:

import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
import {TranslateHttpLoader} from '@ngx-translate/http-loader';
import {HttpClientModule, HttpClient} from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
 BrowserModule,
 HttpClientModule,
 TranslateModule.forRoot({
   loader: {
     provide: TranslateLoader,
     useFactory: HttpLoaderFactory,
     deps: [HttpClient]
   }
 })
  ],
  // ...
})
export class AppModule { }

Finally, in your component, you can use the TranslateService to translate text:

import { TranslateService } from '@ngx-translate/core';

export class AppComponent {
  param = {value: 'world'};

  constructor(private translate: TranslateService) {
 translate.setDefaultLang('en');
  }

  useLanguage(language: string) {
 this.translate.use(language);
  }
}

You can store your translations in JSON files:

// en.json
{
  "HELLO": "hello {{value}}"
}

// fr.json
{
  "HELLO": "bonjour {{value}}"
}

And use it in your templates:

<div>{{ 'HELLO' | translate:param }}</div>

Congratulations! You’ve just implemented i18n and l10n in your Angular application.

As global reach becomes increasingly vital for web applications, it is essential to adapt to the linguistic diversity of users. Angular’s i18n and ngx-translate offer powerful ways to accommodate this need, providing users with a more personalized and native experience.