Angular Integration

Learn how to integrate i18next with Angular applications for server-side internationalization.

Integrate ngx-translate with your Angular application (v14.0.0+) to support multiple languages using Lengrise-managed translations.

Prerequisites

Angular application (v14.0.0+)
Node.js (v16.0.0+)
Package manager (npm,yarn,pnpm)
Translations downloaded from Lengrise

Pull Translation Files

First, you must pull your translation files from Lengrise API. These files will contain all the translated text for your application.

Go to the Installation Guide and follow the steps to download your translations
Place the downloaded JSON files in your project as shown in the project structure below
Ensure that each language has its own JSON file named with the language code (e.g., en.json, es.json)

Integration Setup

After downloading your translation files, install the necessary packages:

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

Project Structure

package.jsonadd

angular.jsonadd

tsconfig.jsonadd

srcadd

main.tsadd

index.htmladd

appadd

app.module.tsadd

app.component.tsadd

app.component.htmladd

componentsadd

language-switcher.component.tsadd

language-switcher.component.htmladd

assetsadd

localesadd

en.jsonadd

es.jsonadd

Configuration Steps

1. Create a translation loader factory

First, you need to create a factory function that will load your translation files:

// app/translate-loader.factory.ts
import { HttpClient } from "@angular/common/http";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, "./locales/", ".json");
}

2. Configure your AppModule

Next, update your app.module.ts to include the translation modules:

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { HttpClientModule, HttpClient } from "@angular/common/http";
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { createTranslateLoader } from "./translate-loader.factory";
import { AppComponent } from "./app.component";
import { LanguageSwitcherComponent } from "./components/language-switcher.component";

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

3. Initialize the translator in your app component

In your app.component.ts file, initialize the translator:

import { Component, OnInit } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
})
export class AppComponent implements OnInit {
  constructor(private translate: TranslateService) {
    // Set default language
    translate.setDefaultLang("en");
  }

  ngOnInit() {
    // Use browser language if available, otherwise use default
    const browserLang = this.translate.getBrowserLang();
    this.translate.use(browserLang?.match(/en|es|fr|de/) ? browserLang : "en");
  }
}

Using Translations

Basic Usage in Templates

Use the translate pipe in your templates:

<!-- In any component template -->
<h1>{{ 'welcome.title' | translate }}</h1>
<p>{{ 'welcome.description' | translate }}</p>

Using Translations Programmatically

Access translations in your TypeScript code:

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

@Component({
  selector: "app-greeting",
  template: "<p>{{ greeting }}</p>",
})
export class GreetingComponent {
  greeting: string = "";

  constructor(private translate: TranslateService) {
    this.translate.get("welcome.greeting").subscribe((res: string) => {
      this.greeting = res;
    });
  }
}

Creating a Language Switcher

Create a language switcher component:

// language-switcher.component.ts
import { Component } from "@angular/core";
import { TranslateService } from "@ngx-translate/core";

@Component({
  selector: "app-language-switcher",
  templateUrl: "./language-switcher.component.html",
})
export class LanguageSwitcherComponent {
  constructor(public translate: TranslateService) {}

  changeLanguage(lang: string) {
    this.translate.use(lang);
  }
}

<!-- language-switcher.component.html -->
<div>
  <button (click)="changeLanguage('en')">English</button>
  <button (click)="changeLanguage('es')">Español</button>
</div>

Using Translation with Parameters

Use parameters in your translations:

<!-- In component template -->
<p>{{ 'greeting' | translate:{ name: username } }}</p>

// In component class
username: string = "John";

Your translation file should contain:

{
  "greeting": "Hello, {{name}}!"
}

Resources

For more detailed information, check out these resources:

PreviousVue.js

NextJavaScript