Step-by-Step Guide: Setting up NGx Translate for i18n Translations in Angular

`ngx-translate` is a popular library for internationalization (i18n) in Angular applications. It provides a simple and efficient way to add multiple language translations to your application, without having to hardcode the translations in your components.

To add `ngx-translate` to an Angular application, follow these steps:

Step 1. Installing ngx-translate

Installment of the `ngx-translate` package can be done with the following command in your terminal:

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

Step 2. Setting it up in the App module

Import the TranslateModule, TranslateLoader from `@ngx-translate/core`, and import TranslateHttpLoader from `@ngx-translate/http-loader` into your AppModule file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [AppComponent, HeaderComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Once that is done we need to add a custom createTranslateLoader function, which will load the translation files from our assets map. This function will be used by the TranslateModule to load the translations from an external file. For example:

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

This function creates a new instance of the TranslateHttpLoader class, which loads the translations from a JSON file located in the ./assets/i18n/ directory.

After we've added a custom translate loader function, we need to set up the TranslateModule with the following configuration in the AppModule. In order for us to actually use the TranslateLoader, we need to make sure we've imported HttpClient and HttpClientModule. The final code of your app module should look similar to this:

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

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

@NgModule({
  declarations: [AppComponent, HeaderComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient],
      },
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Create a map named `i18n` within the `assets` folder and create your translation file, with the given name: `en.json` and add the following content:

{
  "greeting": "Hello!",
  "message": "Welcome to my app."
}

We can now use the `ngx-translate` service in your component to display the translations. For example:

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

@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'greeting' | translate }}</h1>
    <p>{{ 'message' | translate }}</p>
  `
})
export class AppComponent {
  constructor(private translate: TranslateService) {
    translate.setDefaultLang('en');
    translate.use('en');
  }

Here, we're injecting the `TranslateService` and using its translate method to display the translations in the template. We're also setting the default language to English and using the English translation file.

That's it! With these steps, you've successfully added ngx-translate to your Angular application and implemented basic translations.

Watch a video of the process

Preview the complete code on GitHub