Angular i18n built-in support - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the rendered output when using Angular i18n with a simple translation?

Given the Angular component template below with i18n attribute, what will be the rendered text if the current locale is set to French and the translation file contains the correct French translation?

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

Angular

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

A Benvenuto nel nostro sito!

B Bienvenue sur notre site !

C Willkommen auf unserer Seite!

D Welcome to our site!

💡 Hint

Think about how Angular replaces the text based on the locale and translation files.

Angular i18n replaces the text inside elements marked with i18n attribute with the translated string from the locale translation file. If the locale is French and the translation exists, the French text is shown.

📝 Syntax

intermediate

Which Angular i18n syntax correctly marks a placeholder for a dynamic value?

You want to translate a message that includes a dynamic user name. Which of the following Angular i18n syntaxes correctly marks the placeholder for the user name in the template?

Angular

<p i18n>Hello, {{ userName }}!</p>

A <p i18n>Hello, {{ userName }}!</p>

B <p i18n>Hello, <x id="userName">{{ userName }}</x>!</p>

C <p i18n>Hello, <ng-container i18n-name>{{ userName }}</ng-container>!</p>

D <p i18n>Hello, <span i18n-placeholder>{{ userName }}</span>!</p>

💡 Hint

Angular automatically treats interpolations as placeholders inside i18n blocks.

Angular i18n automatically detects interpolations like {{ userName }} as placeholders. No extra markup is needed to mark them.

🔧 Debug

advanced

Why does the Angular i18n extraction fail with this template?

Consider this Angular template snippet:

<div>
  <p i18n>Hello {{ user.firstName }}</p>
  <p i18n>Your balance is {{ balance | currency }}</p>
</div>

The extraction command fails with an error related to the currency pipe. What is the most likely cause?

Angular

<div>
  <p i18n>Hello {{ user.firstName }}</p>
  <p i18n>Your balance is {{ balance | currency }}</p>
</div>

A The currency pipe is not supported inside i18n marked elements during extraction.

B The user.firstName property is undefined causing extraction failure.

C The i18n attribute must be on the parent div, not on individual paragraphs.

D Angular i18n extraction requires all interpolations to be simple variables without pipes.

💡 Hint

Think about what Angular i18n extraction supports inside translations.

Angular i18n extraction does not support pipes inside interpolations because it extracts static text and placeholders only. Pipes like currency cause extraction errors.

❓ state_output

advanced

What is the output when switching locales dynamically with Angular i18n?

An Angular app uses built-in i18n with two locales: English (default) and Spanish. The app loads with English locale. After user action, the locale is switched to Spanish dynamically at runtime. What will happen to the displayed i18n text?

Angular

No code snippet; conceptual question about Angular i18n runtime behavior.

A Angular throws an error because dynamic locale switching is not supported.

B The text changes to Spanish but only for elements added after the switch.

C The displayed text remains in English until the page is reloaded with the Spanish locale.

D The displayed text updates immediately to Spanish translations without page reload.

💡 Hint

Consider how Angular i18n works with compiled templates and locale data.

Angular built-in i18n compiles templates per locale. Dynamic switching at runtime without reload is not supported, so text stays in the original locale until reload.

🧠 Conceptual

expert

Which Angular i18n feature allows handling plural forms correctly in translations?

You want to display a message that changes based on the number of items, for example: "You have 1 message" vs "You have 5 messages". Which Angular i18n feature should you use to handle this properly?

A Use Angular pipes to format plurals inside the interpolation.

B Use a custom directive to switch messages based on the count.

C Use multiple i18n attributes with different messages for each number.

D Use ICU expressions with the plural syntax inside the i18n block.

💡 Hint

Angular i18n supports ICU message syntax for plurals and selections.

ICU expressions allow defining plural forms inside i18n messages, letting Angular select the correct form based on the number.

Practice

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

easy

A. To mark text for translation into different languages

B. To apply CSS styles conditionally

C. To bind data to the component

D. To define event handlers for user actions

Solution

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

   The i18n attribute is used to identify text in templates that should be translated for internationalization.

2. Step 2: Compare with other options

   The other options relate to styling, data binding, and events, which are unrelated to translation.

3. Final Answer:

   To mark text for translation into different languages -> Option A

4. Quick Check:

   i18n attribute = mark text for translation [OK]

Hint: Remember: i18n means internationalization, so it marks text for translation [OK]

Common Mistakes:

• Confusing i18n with data binding syntax
• Thinking i18n applies styles or events
• Assuming i18n is a directive instead of an attribute

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

easy

A. Hello, welcome!

B. Hello, welcome!

C. Hello, welcome!

D. Hello, welcome!

Solution

1. Step 1: Recall Angular i18n attribute usage

   The i18n attribute is added directly to the element without brackets or asterisk.

2. Step 2: Analyze each option

   Hello, welcome!

   uses i18n correctly.

   Hello, welcome!

   uses property binding syntax which is incorrect.

   Hello, welcome!

   uses structural directive syntax which is invalid here.

   Hello, welcome!

   uses a non-existent attribute i18n-text.

3. Final Answer:

   <p i18n>Hello, welcome!</p> -> Option D

4. Quick Check:

   Use plain i18n attribute without brackets or asterisk [OK]

Hint: Use plain i18n attribute on elements, no brackets or asterisks [OK]

Common Mistakes:

• Using property binding syntax [i18n]
• Using structural directive syntax *i18n
• Inventing attributes like i18n-text

3. Given this Angular template snippet:

<h1 i18n>Welcome, {{ userName }}!</h1>

What will be the output if userName is 'Alice' and the app is built with English locale?

medium

A. Welcome, !

B. Welcome, {{ userName }}!

C. Welcome, Alice!

D. Error: Missing translation

Solution

1. Step 1: Understand interpolation with i18n

   The i18n attribute marks the text for translation but Angular still processes interpolation expressions like {{ userName }}.

2. Step 2: Consider the locale and variable value

   With English locale and userName as 'Alice', the text renders with the variable replaced by 'Alice'.

3. Final Answer:

   Welcome, Alice! -> Option C

4. Quick Check:

   i18n with interpolation outputs translated text with variables replaced [OK]

Hint: i18n marks text, interpolation fills variables at runtime [OK]

Common Mistakes:

• Thinking interpolation is ignored inside i18n
• Expecting raw {{ userName }} to show
• Assuming missing translation error for default locale

4. You run ng extract-i18n but the generated translation file is empty. What is the most likely cause?

medium

A. The Angular CLI version is outdated

B. No i18n attributes found in templates

C. The app has no components

D. The translation file path is incorrect

Solution

1. Step 1: Understand what ng extract-i18n does

   This command extracts marked text with i18n attributes from templates into translation files.

2. Step 2: Analyze why the file might be empty

   If no i18n attributes exist, there is nothing to extract, resulting in an empty file.

3. Final Answer:

   No i18n attributes found in templates -> Option B

4. Quick Check:

   Empty extraction file means no i18n markers found [OK]

Hint: Check templates for i18n attributes before extracting [OK]

Common Mistakes:

• Assuming CLI version causes empty file
• Thinking app components absence causes empty file
• Confusing file path issues with extraction content

5. You want to build your Angular app to support English and French using built-in i18n. Which steps are required to serve users in their language?

hard

A. Extract translations, provide French translation file, build app twice with different locales

B. Add i18n attribute, write translations inline, build once

C. Use runtime translation service only, no build changes needed

D. Create separate components for each language manually

Solution

1. Step 1: Extract translations and provide translation files

   Use Angular CLI to extract text marked with i18n and create translation files for English and French.

2. Step 2: Build the app separately for each locale

   Build the app twice, once with English locale and once with French locale, so each build contains the correct translations.

3. Final Answer:

   Extract translations, provide French translation file, build app twice with different locales -> Option A

4. Quick Check:

   Angular i18n requires extraction, translation files, and separate builds [OK]

Hint: Extract, translate, build per locale to support multiple languages [OK]

Common Mistakes:

• Thinking inline translations replace translation files
• Assuming runtime service handles built-in i18n translations
• Trying to create separate components per language manually