Building Bilingual Angular Apps with ngx-translate

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

// app.config.ts (ngx-translate v17 provider API, unchanged in v18)
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideTranslateService } from '@ngx-translate/core';
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTranslateService({
      fallbackLang: 'en',
      loader: provideTranslateHttpLoader({
        prefix: './assets/i18n/',
        suffix: '.json'
      })
    })
  ]
};

// assets/i18n/en.json
{
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "loading": "Loading...",
    "error": "An error occurred. Please try again."
  },
  "accounts": {
    "title": "My Accounts",
    "balance": "Available Balance",
    "noTransactions": "No transactions found."
  },
  "lending": {
    "applyNow": "Apply Now",
    "creditLimit": "Credit Limit",
    "pendingReview": "Your application is under review."
  }
}

// assets/i18n/fr.json
{
  "common": {
    "save": "Enregistrer",
    "cancel": "Annuler",
    "loading": "Chargement...",
    "error": "Une erreur s'est produite. Veuillez réessayer."
  },
  "accounts": {
    "title": "Mes comptes",
    "balance": "Solde disponible",
    "noTransactions": "Aucune transaction trouvée."
  },
  "lending": {
    "applyNow": "Faire une demande",
    "creditLimit": "Limite de crédit",
    "pendingReview": "Votre demande est en cours d'examen."
  }
}

import { DOCUMENT, inject, Injectable, signal } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

export type Language = 'en' | 'fr';

@Injectable({ providedIn: 'root' })
export class LanguageService {
  private translate = inject(TranslateService);
  private document = inject(DOCUMENT);

  currentLanguage = signal<Language>(
    (localStorage.getItem('lang') as Language) ?? 'en'
  );

  constructor() {
    this.translate.addLangs(['en', 'fr']);
    this.setLanguage(this.currentLanguage());
  }

  setLanguage(lang: Language): void {
    this.translate.use(lang);
    this.currentLanguage.set(lang);
    localStorage.setItem('lang', lang);
    this.document.documentElement.lang = lang;
  }
}

@Component({
  standalone: true,
  // TranslatePipe is standalone. TranslateModule still works on v17 but was removed in v18,
  // so import the pipe and the sample survives the upgrade.
  imports: [TranslatePipe, CurrencyPipe],
  template: `
    <h1>{{ 'accounts.title' | translate }}</h1>
    <p>{{ 'accounts.balance' | translate }}: {{ balance | currency:'CAD' }}</p>
    <!-- interpolation -->
    <p>{{ 'greeting' | translate:{ name: userName } }}</p>
  `
})
export class AccountsComponent {
  balance = 4250.00;
  userName = 'Marie';
}

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { TranslateService } from '@ngx-translate/core';

@Component({
  standalone: true,
  template: `<button [attr.aria-label]="closeLabel()">X</button>`
})
export class ModalComponent {
  private translate = inject(TranslateService);

  // stream() emits the current translation and re-emits on every language change,
  // so the label stays correct without a getter running on every change detection pass.
  readonly closeLabel = toSignal(this.translate.stream('common.closeModal'), {
    initialValue: ''
  });
}

// en.json, separate keys (no extra package)
{
  "transactions": {
    "none": "No transactions",
    "one": "1 transaction",
    "many": "{{count}} transactions"
  }
}

// ICU alternative (needs ngx-translate-messageformat-compiler)
{
  "transactionCount": "{count, plural, =0 {No transactions} =1 {1 transaction} other {# transactions}}"
}

// app.config.ts
import { inject, provideAppInitializer } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { firstValueFrom } from 'rxjs';

// Goes in the same providers array as provideTranslateService from the setup block.
// It runs in an injection context, so inject() works directly.
provideAppInitializer(() => {
  const translate = inject(TranslateService);
  const lang = (localStorage.getItem('lang') as 'en' | 'fr') ?? 'en';
  translate.addLangs(['en', 'fr']);
  // The fallback is already configured as fallbackLang in provideTranslateService. To change it
  // at runtime, call setFallbackLang, which replaced setDefaultLang in v17.
  return firstValueFrom(translate.use(lang));
});