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.

Practice

1. What is the primary purpose of the i18n attribute in Angular templates?

easy

A. To mark text for translation in the app

B. To style text with international fonts

C. To add animations to text elements

D. To bind data to the text content

Solution

1. Step 1: Understand the role of i18n in Angular

   The i18n attribute is used to mark text that should be translated for different languages.

2. Step 2: Differentiate from other attributes

   It is not related to styling, animations, or data binding, which are handled by other Angular features.

3. Final Answer:

   To mark text for translation in the app -> Option A

4. Quick Check:

   i18n attribute = mark text for translation [OK]

Hint: Remember: i18n means internationalization for translation [OK]

Common Mistakes:

• Confusing i18n with styling or animations
• Thinking i18n binds data instead of marking text
• Assuming i18n is a directive instead of an attribute

2. Which of the following is the correct syntax to mark a paragraph for translation with a description in Angular?

easy

A. Welcome to our site!

B. Welcome to our site!

C. @@desc

D. Welcome to our site!

Solution

1. Step 1: Recognize the correct i18n attribute format

   The i18n attribute can include a description or meaning using the syntax i18n="@@desc" to help translators.

2. Step 2: Check each option's syntax

   Welcome to our site!

   correctly uses i18n="@@desc" inside the paragraph tag. Options B, C, and D misuse the attribute or place description incorrectly.

3. Final Answer:

   <p i18n="@@desc">Welcome to our site!</p> -> Option D

4. Quick Check:

   Correct i18n syntax with description =

   Welcome to our site!

   [OK]

Hint: Use i18n="@@description" inside the tag for descriptions [OK]

Common Mistakes:

• Placing description outside the tag
• Using i18n-desc instead of i18n
• Confusing description with translation key

3. Given the template code:

<h1 i18n="@@titleDesc">Hello, user!</h1>

What will Angular do with this text during the build process?

medium

A. Throw a syntax error because of the @@ prefix

B. Display 'Hello, user!' without any translation

C. Extract 'Hello, user!' for translation with the description 'titleDesc'

D. Ignore the i18n attribute and render the text as is

Solution

1. Step 1: Understand Angular's i18n extraction

   Angular extracts text marked with i18n for translation and uses the description (after @@) to help translators identify the text.

2. Step 2: Analyze the given code

   The text 'Hello, user!' will be extracted with the description 'titleDesc' for translation files. No syntax error occurs because @@ is valid for description keys.

3. Final Answer:

   Extract 'Hello, user!' for translation with the description 'titleDesc' -> Option C

4. Quick Check:

   i18n extracts text with description = Extract 'Hello, user!' for translation with the description 'titleDesc' [OK]

Hint: @@ means description key for translators in i18n [OK]

Common Mistakes:

• Thinking @@ causes syntax errors
• Assuming text is not extracted for translation
• Believing i18n attribute is ignored at build

4. Identify the error in this Angular template snippet for translation:

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

medium

A. The i18n attribute should be written as i18n-desc

B. The description should be inside @@, like i18n="@@Submit button"

C. The text 'Submit' should be inside double curly braces {{}}

D. The i18n attribute must be on a <span>, not a <button>

Solution

1. Step 1: Check the i18n attribute format

   The description or meaning for translation keys must be prefixed with @@ inside the i18n attribute, e.g., i18n="@@Submit button".

2. Step 2: Validate other options

   i18n can be used on any element, including button. Text does not require curly braces for static content. The attribute i18n-desc is not valid.

3. Final Answer:

   The description should be inside @@, like i18n="@@Submit button" -> Option B

4. Quick Check:

   Description needs @@ prefix in i18n attribute [OK]

Hint: Descriptions in i18n need @@ prefix inside quotes [OK]

Common Mistakes:

• Omitting @@ prefix for descriptions
• Thinking i18n only works on <span> elements
• Using i18n-desc instead of i18n

5. You want to mark multiple pieces of text in an Angular template for translation, each with a unique description. Which approach correctly applies this?

hard

A. Welcome
This is the intro paragraph.

B. Welcome
This is the intro paragraph.

C. Welcome
This is the intro paragraph.

D. Welcome
This is the intro paragraph.

Solution

1. Step 1: Use unique descriptions with @@ in i18n attribute

   Angular uses the syntax i18n="@@description" to add unique descriptions for each translatable text.

2. Step 2: Evaluate each option

   Welcome

   This is the intro paragraph.

   correctly uses i18n="@@headerDesc" and i18n="@@introDesc".

   Welcome

   This is the intro paragraph.

   uses invalid i18n-desc.

   Welcome

   This is the intro paragraph.

   misses @@ prefix.

   Welcome

   This is the intro paragraph.

   uses plain text instead of description keys.

3. Final Answer:

   <h2 i18n="@@headerDesc">Welcome</h2> <p i18n="@@introDesc">This is the intro paragraph.</p> -> Option A

4. Quick Check:

   Use i18n="@@uniqueDescription" for each text [OK]

Hint: Use @@ prefix in i18n for unique translation descriptions [OK]

Common Mistakes:

• Using i18n-desc instead of i18n
• Omitting @@ prefix for descriptions
• Putting descriptions as plain text in i18n attribute