Marking text for translation in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will be the rendered output of this Angular template?

Consider this Angular template snippet using i18n attribute:

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

What will the user see if no translation files are loaded?

Angular

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

A The text 'Welcome to our site!' will be displayed as is.

B The text will be replaced by a key like 'WELCOME_TO_OUR_SITE'.

C Nothing will be displayed because translation is missing.

D An error will be thrown in the console about missing translation.

💡 Hint

Think about what Angular does if no translation is found for marked text.

When Angular cannot find a translation for marked text, it falls back to the original text inside the element.

📝 Syntax

intermediate

Which is the correct way to mark a button label for translation in Angular?

You want to mark the button text 'Submit' for translation. Which Angular syntax is correct?

A <button translate>Submit</button>

B <button i18n>Submit</button>

C <button [i18n]="'Submit'">Submit</button>

D <button i18n-label>Submit</button>

💡 Hint

Angular uses a specific attribute to mark text for translation.

The 'i18n' attribute is the standard way to mark text content for translation in Angular templates.

❓ state_output

advanced

What will be the value of the translated message in this Angular component?

Given this Angular component code snippet:

import { Component } from '@angular/core';
@Component({
  selector: 'app-greet',
  template: `
Hello, {{name}}!
`
})
export class GreetComponent {
  name = 'Alice';
}

Assuming the translation file replaces 'Hello, {$INTERPOLATION}!' with 'Hola, {$INTERPOLATION}!', what will be rendered?

A Hola, Alice!

B Hello, Alice!

C Hello, {{name}}!

D Hola, {{name}}!

💡 Hint

Angular replaces interpolation inside translated strings.

Angular applies translation and replaces interpolation placeholders with actual values at runtime.

🔧 Debug

advanced

Why does this Angular template fail to translate the button label?

Template snippet:

<button i18n-label>Click me</button>

Translation file contains a translation for 'Click me'. Why is the label not translated?

Angular

<button i18n-label>Click me</button>

A Because the i18n attribute must be on a parent element.

B Because the translation file is missing the key for 'Click me'.

C Because the button element cannot be translated.

D Because 'i18n-label' is not a valid Angular i18n attribute.

💡 Hint

Check Angular's official i18n attribute names.

Angular uses 'i18n' attribute, not 'i18n-label'. The latter is invalid and ignored.

🧠 Conceptual

expert

How does Angular handle pluralization in translations marked with i18n?

You want to translate a message that changes based on a number, like 'You have 1 message' vs 'You have 5 messages'. How does Angular's i18n system support this?

A Angular requires separate i18n tags for each plural form and switches them manually.

B Angular does not support pluralization; you must handle it in component code.

C Angular uses ICU message syntax inside the i18n attribute to handle plural forms.

D Angular uses a special directive called i18nPlural to handle pluralization.

💡 Hint

Think about how ICU messages work in translation systems.

Angular supports pluralization by allowing ICU message syntax inside i18n marked text, enabling dynamic plural forms based on variables.

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