Marking text for translation in Angular - Step-by-Step Execution

Concept Flow - Marking text for translation

Write text in template

↓

Add i18n attribute

↓

Angular compiler extracts text

↓

Generate translation files

↓

Translate text externally

↓

Build app with translations

↓

User sees translated text

This flow shows how Angular marks text in templates for translation, extracts it, and displays translated text at runtime.

Execution Sample

Angular

<p i18n="@@welcome">Welcome to our site!</p>

This code marks the paragraph text for translation with a custom message ID.

Execution Table

Step	Action	Template Text	i18n Attribute	Translation Extraction	Displayed Text
1	Write text in template	Welcome to our site!	None	No extraction	Welcome to our site!
2	Add i18n attribute	Welcome to our site!	i18n="@@welcome"	Text marked for extraction	Welcome to our site!
3	Run Angular extraction tool	Welcome to our site!	i18n="@@welcome"	Extracted with ID @@welcome	Welcome to our site!
4	Translate text externally	Welcome to our site!	i18n="@@welcome"	Translation file updated	Welcome to our site!
5	Build app with translations	Welcome to our site!	i18n="@@welcome"	Translation applied at runtime	¡Bienvenido a nuestro sitio!
6	User views app	Welcome to our site!	i18n="@@welcome"	Translation used	¡Bienvenido a nuestro sitio!

💡 User sees translated text after build with translations

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 5	Final
Template Text	Welcome to our site!	Welcome to our site!	Welcome to our site!	Welcome to our site!	Welcome to our site!
i18n Attribute	None	i18n="@@welcome"	i18n="@@welcome"	i18n="@@welcome"	i18n="@@welcome"
Displayed Text	Welcome to our site!	Welcome to our site!	Welcome to our site!	¡Bienvenido a nuestro sitio!	¡Bienvenido a nuestro sitio!

Key Moments - 3 Insights

Why do we add the i18n attribute to the text?

Adding the i18n attribute marks the text so Angular knows to extract it for translation, as shown in step 2 and 3 of the execution table.

When does the text actually get translated for the user?

The text is translated at runtime after building the app with translation files, as shown in step 5 and 6 where the displayed text changes.

Can the text be translated without the i18n attribute?

No, without the i18n attribute Angular will not extract the text for translation, so it stays in the original language (step 1).

Visual Quiz - 3 Questions

Look at the execution table, what is the displayed text at step 3?

A Welcome to our site!

B ¡Bienvenido a nuestro sitio!

C Text not displayed

D Translation file content

💡 Hint

Check the 'Displayed Text' column at step 3 in the execution_table.

At which step does Angular extract the text for translation?

A Step 2

B Step 3

C Step 1

D Step 5

💡 Hint

Look at the 'Translation Extraction' column to find when extraction happens.

If the i18n attribute is missing, what will the user see?

A Translated text

B Empty text

C Original text

D Error message

💡 Hint

Refer to step 1 and 6 in the execution_table and variable_tracker for displayed text without i18n.

Concept Snapshot

Angular translation marking:
- Add i18n attribute to template text
- Angular extracts marked text for translation
- External translation files updated
- Build app with translations
- User sees translated text at runtime

Full Transcript

In Angular, to prepare text for translation, you add the i18n attribute to the text in your template. This marks the text so Angular's compiler can extract it into translation files. After translating the text externally, you build the app with these translations. At runtime, Angular replaces the original text with the translated version so users see the correct language. Without the i18n attribute, text stays in the original language. This process ensures your app can support multiple languages smoothly.