ngx-translate

App bootstraps
     ↓
TranslateService.use('en') called
     ↓
TranslateHttpLoader fetches /i18n/en.json from the server
     ↓
Translations stored in-memory as a JavaScript object
     ↓
{{ 'HELLO' | translate }} → looks up 'HELLO' in the object → renders 'Hello'
 
User switches to French:
     ↓
TranslateService.use('fr') called
     ↓
Loader fetches /i18n/fr.json (or returns from cache)
     ↓
In-memory translations replaced with French object
     ↓
All TranslatePipe / translate() instances re-render automatically
No page reload. Same bundle. New language.

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

// app.config.ts
import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import {
  provideTranslateService, TranslateService
} from '@ngx-translate/core';
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
 
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),              // TranslateHttpLoader uses HttpClient
    provideTranslateService({
      lang: 'en',                     // default language on startup
      fallbackLang: 'en',            // fallback when a key is missing
      loader: provideTranslateHttpLoader({
        prefix: '/i18n/',            // serves /i18n/en.json, /i18n/fr.json
        suffix: '.json',
      }),
    }),
    // Optional: load translations before the app renders
    provideAppInitializer(() =>
      inject(TranslateService).use('en')
    ),
  ],
};

// NgModule approach (Angular 2–13, ngx-translate v12–v14)
@NgModule({
  imports: [
    HttpClientModule,
    TranslateModule.forRoot({
      defaultLanguage: 'en',
      loader: {
        provide: TranslateLoader,
        useFactory: (http: HttpClient) =>
          new TranslateHttpLoader(http, '/i18n/', '.json'),
        deps: [HttpClient],
      },
    }),
  ],
})
export class AppModule {}

// src/i18n/en.json
{
  "COMMON": {
    "SAVE": "Save",
    "CANCEL": "Cancel",
    "LOADING": "Loading…"
  },
  "AUTH": {
    "LOGIN": "Log in",
    "LOGOUT": "Log out",
    "WELCOME": "Welcome, {{ name }}!",
    "ERRORS": {
      "INVALID_CREDENTIALS": "Invalid email or password"
    }
  },
  "NOTIFICATIONS": {
    "COUNT_ONE": "You have 1 notification",
    "COUNT_OTHER": "You have {{ count }} notifications"
  }
}

// src/i18n/fr.json
{
  "COMMON": {
    "SAVE": "Enregistrer",
    "CANCEL": "Annuler",
    "LOADING": "Chargement…"
  },
  "AUTH": {
    "LOGIN": "Se connecter",
    "LOGOUT": "Se déconnecter",
    "WELCOME": "Bienvenue, {{ name }} !",
    "ERRORS": {
      "INVALID_CREDENTIALS": "Email ou mot de passe invalide"
    }
  },
  "NOTIFICATIONS": {
    "COUNT_ONE": "Vous avez 1 notification",
    "COUNT_OTHER": "Vous avez {{ count }} notifications"
  }
}

import { Component } from '@angular/core';
import { TranslatePipe } from '@ngx-translate/core';
 
@Component({
  selector: 'app-header',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <nav>
      <a>{{ 'AUTH.LOGIN' | translate }}</a>
      <a>{{ 'AUTH.LOGOUT' | translate }}</a>
 
      <!-- With interpolation parameters -->
      <p>{{ 'AUTH.WELCOME' | translate:{ name: currentUser().name } }}</p>
    </nav>
  `,
})
export class HeaderComponent { /* ... */ }

import { Component, inject } from '@angular/core';
import { translate, TranslateService, TranslatePipe } from '@ngx-translate/core';
 
@Component({
  selector: 'app-page-title',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <title>{{ pageTitle() }}</title>
    <h1>{{ 'HOME.HEADING' | translate }}</h1>
  `,
})
export class PageTitleComponent {
  // Signal that auto-updates on language change — use in computed(), effect(), or template
  pageTitle = translate('HOME.TITLE');
 
  // With parameters — reactive parameters via a signal
  userGreeting = translate('AUTH.WELCOME', { name: 'Alice' });
}

import { Component, inject, computed } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
 
@Component({ /* ... */ })
export class NotificationComponent {
  private translate = inject(TranslateService);
 
  // currentLang is a Signal<Language | null> in v18+ — call it as a function
  currentLang = this.translate.currentLang;    // Signal<'en' | 'fr' | null>
 
  // Synchronous translation (only safe after translations are loaded)
  getInstant(key: string): string {
    return this.translate.instant(key);
  }
 
  // Observable — emits once when loaded
  getAsync(key: string): void {
    this.translate.get('AUTH.ERRORS.INVALID_CREDENTIALS').subscribe(msg => {
      this.showToast(msg);
    });
  }
 
  // Stream — emits immediately AND re-emits on language change
  watchedMessage = this.translate.stream('NOTIFICATIONS.COUNT_OTHER', { count: 5 });
 
  // Switch language
  switchToFrench(): void {
    this.translate.use('fr');   // fetches fr.json if not cached, then updates all pipes/signals
  }
}

import { TranslatePipe, TranslateBlockDirective } from '@ngx-translate/core';
 
@Component({
  standalone: true,
  imports: [TranslatePipe, TranslateBlockDirective],
  template: `
    <ng-container *translateBlock="let t">
      <button>{{ t('COMMON.SAVE') }}</button>
      <button>{{ t('COMMON.CANCEL') }}</button>
      <p>{{ t('AUTH.WELCOME', { name: user().name }) }}</p>
    </ng-container>
  `,
})
export class FormFooterComponent { /* ... */ }

@Component({
  selector: 'app-lang-switcher',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <div class="lang-switcher">
      @for (lang of availableLangs; track lang.code) {
        <button
          [class.active]="currentLang() === lang.code"
          (click)="switchLang(lang.code)"
        >
          {{ lang.label }}
        </button>
      }
    </div>
  `,
})
export class LangSwitcherComponent {
  private translate = inject(TranslateService);
 
  currentLang = this.translate.currentLang;  // Signal — reads reactively in template
 
  availableLangs = [
    { code: 'en', label: 'English' },
    { code: 'fr', label: 'Français' },
    { code: 'de', label: 'Deutsch' },
  ];
 
  switchLang(lang: string): void {
    this.translate.use(lang);
    localStorage.setItem('preferred-lang', lang);
  }
}

// app.config.ts — restore saved language on startup
provideAppInitializer(() => {
  const translate = inject(TranslateService);
  const saved = localStorage.getItem('preferred-lang') ?? 'en';
  return translate.use(saved);
})

// feature/feature.routes.ts
export const featureRoutes: Routes = [
  {
    path: 'dashboard',
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: (http: HttpClient, translate: TranslateService) => () =>
          http.get(`/i18n/dashboard/en.json`).pipe(
            tap(translations => translate.setTranslation('en', translations, true)),
          ).toPromise(),
        deps: [HttpClient, TranslateService],
        multi: true,
      },
    ],
    component: DashboardComponent,
  },
];

import { MissingTranslationHandler, MissingTranslationHandlerParams } from '@ngx-translate/core';
 
export class LoggingMissingTranslationHandler implements MissingTranslationHandler {
  handle(params: MissingTranslationHandlerParams): string {
    if (!environment.production) {
      console.warn(`[i18n] Missing translation for key: "${params.key}"`);
    }
    return params.key;   // Show key as fallback rather than empty string
  }
}
 
// Register in provideTranslateService
provideTranslateService({
  lang: 'en',
  missingTranslationHandler: {
    provide: MissingTranslationHandler,
    useClass: LoggingMissingTranslationHandler,
  },
})

import { TestBed } from '@angular/core/testing';
import {
  provideTranslateService,
  provideTranslateLoader,
  TranslateLoader,
  Translation,
} from '@ngx-translate/core';
import { of } from 'rxjs';
 
const testTranslations: { [key: string]: Translation } = {
  en: {
    'AUTH.LOGIN': 'Log in',
    'AUTH.WELCOME': 'Welcome, {{ name }}!',
  },
};
 
class StaticTranslateLoader implements TranslateLoader {
  getTranslation(lang: string) {
    return of(testTranslations[lang] ?? {});
  }
}
 
describe('HeaderComponent', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [HeaderComponent],
      providers: [
        provideTranslateService({
          lang: 'en',
          loader: provideTranslateLoader(StaticTranslateLoader),
        }),
      ],
    });
  });
});

// ❌ Returns a Signal object in v18 — not the language string
if (this.translate.currentLang === 'en') { ... }
 
// ✅ Call the signal
if (this.translate.currentLang() === 'en') { ... }
 
// ✅ Or use the non-reactive snapshot helper
if (this.translate.getCurrentLang() === 'en') { ... }

// ❌ Called too early — translations not loaded yet, returns the key
export class AppComponent {
  title = this.translate.instant('APP.TITLE');   // probably returns 'APP.TITLE'
  constructor(private translate: TranslateService) {}
}
 
// ✅ Use translate() signal — resolves when translations are available
export class AppComponent {
  title = translate('APP.TITLE');   // Signal — empty until loaded, then fills in
}
 
// ✅ Or wait for translations to load via get()
export class AppComponent {
  title = '';
  constructor(private translate: TranslateService) {
    translate.get('APP.TITLE').subscribe(t => this.title = t);
  }
}

<!-- ❌ Deprecated — content as translation key -->
<span translate>AUTH.LOGIN</span>
 
<!-- ✅ Pipe — clear and explicit -->
<span>{{ 'AUTH.LOGIN' | translate }}</span>
 
<!-- ✅ translate() signal — for use in component logic -->
<span>{{ loginLabel() }}</span>

// ❌ TranslatePipe not imported — {{ 'KEY' | translate }} renders nothing
@Component({
  standalone: true,
  imports: [],
  template: `<p>{{ 'AUTH.LOGIN' | translate }}</p>`,
})
 
// ✅ TranslatePipe imported
@Component({
  standalone: true,
  imports: [TranslatePipe],
  template: `<p>{{ 'AUTH.LOGIN' | translate }}</p>`,
})