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.