Angular › Internationalization (i18n) in Angular

What is internationalization in Angular, and what built in tool does the framework provide for it?

Beginner

Answer

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