Internationalization (i18n) in Angular
From the Angular cheat sheet · i18n · verified Jul 2026
Internationalization (i18n)
Built-in i18n for multi-language support
typescript
// Mark text for translation
@Component({
template: \`
<p i18n="@@welcome.message">Welcome to our app!</p>
<p i18n="User greeting|Greeting message for user@@user.greeting">
Hello, {{ userName }}!
</p>
<button i18n="@@button.submit">Submit</button>
\`
})
// Extract messages for translation
ng extract-i18n
ng extract-i18n --output-path src/locale💡 Use i18n attribute to mark text for translation
⚡ Angular CLI extracts and manages translation files automatically
📌 Build separate bundles for each locale for best performance
🔥 Use ICU message format for complex pluralization and selection