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.