Implementing Internationalization and Localization with ngx-translate

In today’s interconnected world, it’s important for developers to build applications that can support multiple languages and locales. Internationalization (i18n) and localization (l10n) are two key aspects of building applications that can be used globally. In this article, we’ll explore how to use the ngx-translate library to implement i18n and l10n in Angular applications.

Why use ngx-translate?

ngx-translate is a popular library for implementing i18n and l10n in Angular applications. It provides a simple, yet powerful API for managing translations, and supports a wide range of features, including pluralization, gender-specific translations, and more. Here are some of the benefits of using ngx-translate:

1. Simplifies translations

ngx-translate simplifies the process of adding translations to your Angular application. With ngx-translate, you can store all of your translations in one place, and easily switch between languages and locales.

2. Supports a wide range of features

ngx-translate supports a wide range of features, including pluralization, gender-specific translations, and more. This makes it easier to build applications that can support different languages and locales.

3. Provides a simple API

ngx-translate provides a simple API for managing translations in your Angular application. This makes it easy to integrate with your existing codebase, and allows you to add translations quickly and easily.

4. Easy to integrate with other libraries

ngx-translate is easy to integrate with other Angular libraries, making it a great choice for building complex applications that require internationalization and localization.

How to use ngx-translate

1. Installing ngx-translate

The first step in using ngx-translate is to install it in your Angular application. You can do this by running the following command in your terminal:

npm install @ngx-translate/core --save

2. Configuring ngx-translate

After installing ngx-translate, you’ll need to configure it in your Angular application. This involves importing the TranslateModule and providing a default language for your application. You can also configure the loader to load translation files from a remote server, if necessary.

Here’s an example of how to configure ngx-translate in your Angular application:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient, HttpClientModule } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

In this example, we’re importing the necessary modules and setting up the TranslateModule. We’re also creating a HttpLoaderFactory function that specifies where our translation files are located.

3. Adding translations

After configuring ngx-translate, you can start adding translations to your application. To add a translation, you’ll need to create a translation file in JSON format, and add it to the assets/i18n folder in your Angular application.

Here’s an example of a translation file:

{
“GREETING”: “Hello”,
“WELCOME”: “Welcome to ngx-translate”,
“TODAY”: “Today is {{date, date:’short’}}”
}

In this example, we have three translations: “GREETING”, “WELCOME”, and “TODAY”.

4. Using translations in your application

Once you’ve added your translations, you can use them in your Angular application. To do this, you’ll need to inject the TranslateService into your component, and use the get method to retrieve the translated text.

Here’s an example of how to use translations in your Angular application:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'GREETING' | translate }}</h1>
    <p>{{ 'WELCOME' | translate }}</p>
    <p [innerHTML]="'TODAY' | translate: { date: today }"></p>
  `
})
export class AppComponent {
  today = new Date();

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

In this example, we’re injecting the TranslateService into our component, and using the translate pipe to retrieve the translated text. We’re also passing in a variable to the “TODAY” translation, which is a date that we’ve defined in our component.

5. Switching languages

One of the key benefits of using ngx-translate is that it makes it easy to switch between languages in your Angular application. To switch languages, you’ll need to call the use method on the TranslateService, and pass in the language code for the desired language.

Here’s an example of how to switch languages in your Angular application:

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

@Component({
  selector: 'app-root',
  template: `
    <button (click)="switchLanguage('en')">English</button>
    <button (click)="switchLanguage('fr')">French</button>
    <button (click)="switchLanguage('es')">Spanish</button>

    <h1>{{ 'GREETING' | translate }}</h1>
    <p>{{ 'WELCOME' | translate }}</p>
    <p [innerHTML]="'TODAY' | translate: { date: today }"></p>
  `
})
export class AppComponent {
  today = new Date();

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

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

In this example, we’re adding buttons to switch between languages, and calling the use method on the TranslateService to switch languages.

Conclusion

In this article, we’ve explored how to use the ngx-translate library to implement i18n and l10n in Angular applications. We’ve discussed the benefits of using ngx-translate, and provided a step-by-step guide for configuring and using the library in your Angular application. With ngx-translate, it’s easy to build applications that can support multiple languages and locales, and provide a seamless user experience for users around the world.