Internationalization (i18n) in Angular
5 questions found
What is internationalization in Angular, and what built in tool does the framework provide for it?
Beginner
Internationalization, often shortened to i18n, means building an app so it can easily show text in different languages for different users around the world. Angular provides a built in i18n system, marking text in templates for translation and generating a separate build for each supported language.
<h1 i18n="@@welcomeMessage">Welcome to our site</h1>
// Extract translatable text
ng extract-i18n
// Generates a translation file listing all marked text for translators
Real-world example
An online store expands into new countries by marking their key page text with the i18n attribute, then providing translated versions of that extracted text for French and Spanish speaking customers.
Common follow-ups: How does Angular decide which language build to serve to a specific visitor?;What is the difference between Angular's built in i18n and a third party library like ngx-translate?
Build
Environments & Deployment;Components & Templates
How does the popular ngx-translate library offer a different approach to translations compared to Angular's built in i18n?
Intermediate
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
How do you handle pluralization correctly across different languages in an internationalized Angular app?
Advanced
Angular's i18n system provides an ICU expression syntax specifically for plurals, letting you define separate translations for different count ranges directly inside your template, and Angular automatically picks the correct one based on both the language and the actual number being displayed.
<span i18n>{ itemCount, plural,
=0 {No items}
=1 {One item}
other {{{ itemCount }} items}
}</span>
Real-world example
A shopping cart correctly shows No items, One item, or three items in English, and automatically shows the correct grammatically different forms in a language with more complex plural rules, using Angular's built in ICU plural syntax.
Common follow-ups: Why do some languages need more than two plural forms while English only needs two?;How would you test that pluralization works correctly for every supported language?
Testing with Jasmine & Karma;Angular Style Guide & Best Practices
How do you format dates, numbers, and currency correctly for different locales in an Angular app?
Intermediate
Angular provides built in pipes, like date, number, and currency, that automatically format values according to the active locale, showing dates, decimal separators, and currency symbols in the style that users from that specific region expect to see.
<p>{{ orderDate | date:'longDate' }}</p>
<p>{{ price | currency:'EUR' }}</p>
// Formats differently depending on the app's configured locale, such as en-US versus fr-FR
Real-world example
An online store shows prices with a comma as the decimal separator for French customers and a period for American customers, entirely automatically, thanks to Angular's built in currency pipe respecting the active locale.
Common follow-ups: How do you change the active locale used by these pipes for a specific user?;What is the difference between formatting a value with a pipe versus doing it manually in TypeScript?
Pipes (Built-in & Custom);Components & Templates
How would you let a user switch the display language of an Angular app using a simple dropdown menu?
Beginner
With a runtime translation approach like ngx-translate, you store the currently selected language and call the service's use method whenever the user picks a new option, letting all translated text on the page update immediately without needing to reload the browser.
<select (change)="switchLanguage($event.target.value)">
<option value="en">English</option>
<option value="fr">French</option>
</select>
switchLanguage(lang: string) {
this.translate.use(lang);
}
Real-world example
A website's header includes a simple language dropdown, and choosing a new language instantly updates every piece of translated text on the page, without needing to reload the browser.
Common follow-ups: How would you remember the user's chosen language the next time they visit the site?;Should the selected language also affect how dates and numbers are formatted?
State Management;RxJS & Observables