How To Use ngx-translate with Angular?

Last Updated : 14 Oct, 2024

We’ll walk through how to use ngx-translate Angular to add multilingual support to your application. You’ll learn how to set up @ngx-translate/core and @ngx-translate/http-loader to pull in translation files stored in the assets directory. We’ll cover how to create translation keys, using the translate pipe to display translated content, and implement buttons to switch easily between English and German.

Approach

To implement translation, install @ngx-translate/core and @ngx-translate/http-loader, then create en.json and de.json in the assets/i18n/ directory with translation keys. In app.module.ts, import HttpClientModule, TranslateModule, and TranslateLoader. Set up a TranslateHttpLoader to load files from the assets/i18n/ directory. Use TranslateModule.forRoot() with HttpLoaderFactory to configure it. In the template, use the translate pipe (e.g., {{ 'TITLE' | translate }}) and create buttons to switch between English and German by calling translateService.use('en') or translateService.use('de').

Setting up the Project and installation of Commands

Step 1: Open the terminal and run the following command for running the angular project:

npm install -g @angular/cli

Step 2: Use the below commands to set up the app, and install the required ngx-translate dependencies:

ng new angular-ngx-translate --standalone
cd angular-ngx-translate
npm install @ngx-translate/core @ngx-translate/http-loader

Project Structure:

Updated Dependencies:

"dependencies": {
    "@angular/animations": "^18.0.0",
    "@angular/common": "^18.0.0",
    "@angular/compiler": "^18.0.0",
    "@angular/core": "^18.0.0",
    "@angular/forms": "^18.0.0",
    "@angular/platform-browser": "^18.0.0",
    "@angular/platform-browser-dynamic": "^18.0.0",
    "@angular/router": "^18.0.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },

Example: This demonstrates the setting up of translation using @ngx-translate/core and @ngx-translate/http-loader to load English and German locale files and then switching languages via buttons.

CSS

/*de.json*/
{
  "TITLE": "Willkommen beim Standalone Component Beispiel",
  "DESCRIPTION": "Dies ist ein Beispiel für die Verwendung von ngx-translate mit Angular-Standalone-Komponenten."
}

CSS

/*en.json*/
{
  "TITLE": "Welcome to the Standalone Component Example",
  "DESCRIPTION": "This is an example of using ngx-translate with Angular standalone components."
}

JavaScript

//src/main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { HttpClient, provideHttpClient } from '@angular/common/http';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { importProvidersFrom } from '@angular/core';
import { AppComponent } from './app/app.component';

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

bootstrapApplication(AppComponent, {
    providers: [
        provideHttpClient(),
        importProvidersFrom(
            TranslateModule.forRoot({
                loader: {
                    provide: TranslateLoader,
                    useFactory: HttpLoaderFactory,
                    deps: [HttpClient]
                }
            })
        )
    ]
}).catch((err) => console.error(err));

JavaScript

//src/app/app.component.ts
import { Component } from '@angular/core';
import { TranslateModule, TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'app-root',
    standalone: true,
    template: `
    <div class="container">
      <h1>{{ 'TITLE' | translate }}</h1>
      <p>{{ 'DESCRIPTION' | translate }}</p>
      <button (click)="switchLanguage('en')">English</button>
      <button (click)="switchLanguage('de')">German</button>
    </div>
  `,
    styles: [`
    .container {
      padding: 20px;
      text-align: center;
    }
    button {
      margin: 5px;
    }
  `],
    imports: [TranslateModule]
})
export class AppComponent {
    constructor(private translate: TranslateService) {
        // Set the default language
        this.translate.setDefaultLang('en');
        // Use English as the initial language
        this.translate.use('en');
    }

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