How to translate text with Angular i18n
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Implementing internationalization is crucial for Angular applications that serve users in multiple languages and regions. As the creator of CoreUI with over 11 years of Angular development experience since 2014, I’ve built multilingual interfaces for global enterprise applications. The most effective solution is to use Angular’s built-in i18n system with the i18n attribute to mark translatable text. This approach integrates seamlessly with Angular’s build process and provides compile-time translation for optimal performance.
Use the i18n attribute to mark text for translation in Angular templates.
<!-- template.html -->
<h1 i18n>Welcome to our application</h1>
<p i18n='@@welcomeMessage'>This is a translatable message</p>
<button i18n='Submit button|Button to submit form'>Submit</button>
// component.ts
export class AppComponent {
userName = 'John'
}
<!-- with variables -->
<p i18n>Hello {{ userName }}</p>
The i18n attribute marks text for extraction and translation. You can add a unique ID using @@id syntax to ensure consistent translations across your app. Descriptions and meaning can be added using the pipe syntax meaning|description. After marking text, run ng extract-i18n to generate translation files. Angular replaces marked text with translations at build time based on the target locale, ensuring no runtime performance overhead.
Best Practice Note
This is the same i18n approach we use in CoreUI Angular components for multilingual support. Always provide unique IDs for important translations to prevent conflicts. For runtime translation or dynamic content, consider using libraries like ngx-translate, but the built-in i18n system offers better performance for static content.
