Angular › Internationalization (i18n) in Angular

How does the popular ngx-translate library offer a different approach to translations compared to Angular's built in i18n?

Intermediate

Answer

Unlike Angular's built in i18n, which requires a separate build for each language, ngx-translate loads translation files at runtime and lets a user switch languages instantly without reloading the page or requiring a completely separate build, at the cost of the framework doing a bit less automatic optimization.

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

constructor(private translate: TranslateService) {
  translate.setDefaultLang('en');
}

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

<h1>{{ 'WELCOME_MESSAGE' | translate }}</h1>

Real-world example A travel booking app lets a user instantly switch between English, French, and Spanish using a simple dropdown menu, with ngx-translate updating every piece of translated text on the page immediately without a page reload.

Common follow-ups: What is the tradeoff of loading translations at runtime versus baking them into separate builds ahead of time?;How does ngx-translate handle a missing translation key gracefully?

Standalone Components;Build Environments & Deployment