Why i18n matters in Angular

Introduction

i18n helps your app speak many languages so more people can use it easily.

You want users from different countries to read your app in their own language.

Your app needs to support multiple languages for global customers.

You want to show dates, numbers, and currencies in a way that feels natural to each user.

You plan to grow your app to new regions with different languages.

You want to improve user experience by respecting local language and culture.

Syntax

Angular

No specific code here, but Angular uses special tags and tools to mark text for translation.

Angular uses i18n attributes in templates to mark text for translation.

You extract messages with Angular CLI and provide translations in different language files.

Examples

This marks the heading text for translation.

Angular

<h1 i18n>Welcome to our app!</h1>

This marks a paragraph with a custom message ID for translation, including a variable.

Angular

<p i18n='@@greeting'>Hello, {{ userName }}!</p>

Sample Program

This simple Angular template shows how to mark text for translation using i18n attributes.

Angular

<!-- app.component.html -->
<h1 i18n>Welcome to our app!</h1>
<p i18n='@@intro'>This app helps you learn new things.</p>

Important Notes

Always mark all user-visible text with i18n to prepare for translations.

Remember to handle plural forms and variables carefully in translations.

Test your app in different languages to ensure the layout and text look good.

Summary

i18n makes your app usable by people who speak different languages.

Angular uses i18n attributes to mark text for translation.

Supporting i18n improves user experience and helps your app reach more users.