Marking text for translation in Angular

Introduction

Marking text for translation helps your app show content in different languages. It tells Angular which parts to translate.

You want your app to support multiple languages for users worldwide.

You have static text in your templates that should change based on user language.

You want to prepare your app for future translations without changing code later.

Syntax

Angular

<p i18n>Text to translate</p>

Use the i18n attribute on HTML elements to mark text for translation.

You can add a description like i18n="meaning|description" to help translators.

Examples

This marks the heading text for translation.

Angular

<h1 i18n>Welcome to our site</h1>

Here, a description helps translators understand the button's purpose.

Angular

<button i18n="button label|Submit button">Submit</button>

You can mark text with nested HTML tags for translation.

Angular

<p i18n>Click <strong>here</strong> to continue.</p>

Sample Program

This simple Angular template marks text and buttons for translation so they can appear in different languages.

Angular

<!-- app.component.html -->
<h2 i18n>Choose your language</h2>
<button i18n="button label|English language button">English</button>
<button i18n="button label|Spanish language button">Español</button>

Important Notes

Mark only the text users see, not variable names or code.

Use clear descriptions in i18n attributes to help translators.

Angular extracts these marked texts into files for translators to work on.

Summary

Use the i18n attribute to mark text for translation in Angular templates.

Adding descriptions helps translators understand context.

This prepares your app to support multiple languages easily.