Angular i18n built-in support - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to mark the text for translation using Angular i18n.

Angular

<p i18n>[1]</p>

Drag options to blanks, or click blank then click option'

AHello, world!

Btranslate

CngIf

Di18n-attr

Attempts:

3 left

💡 Hint

Common Mistakes

Putting 'i18n' as the text content instead of as an attribute.

Using Angular directives like 'ngIf' instead of marking text for translation.

The i18n attribute marks the text inside the element for translation. Here, the text 'Hello, world!' will be extracted for translation.

2fill in blank

medium

Complete the code to add a description to the i18n attribute for better translation context.

Angular

<button i18n=[1]>Submit</button>

Drag options to blanks, or click blank then click option'

A"Submit button"

B"@@submitBtn"

C"Submit description"

D"Submit button description"

Attempts:

3 left

💡 Hint

Common Mistakes

Using an ID instead of a description.

Not using quotes around the description.

Adding a description helps translators understand the context. The syntax is i18n="description". Here, 'Submit button description' provides clear context.

3fill in blank

hard

Fix the error in the i18n attribute usage to correctly mark the placeholder for translation.

Angular

<input placeholder=[1] i18n-placeholder>

Drag options to blanks, or click blank then click option'

AEnter your name

B"Enter your name"

C'Enter your name'

D{{ 'Enter your name' }}

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around the placeholder text.

Using Angular interpolation syntax inside attribute without quotes.

The placeholder attribute value must be a quoted string. Using "Enter your name" ensures correct HTML syntax and Angular i18n extraction.

4fill in blank

hard

Fill both blanks to correctly use Angular i18n with a custom message ID and meaning.

Angular

<p i18n=[1]>[2]</p>

Drag options to blanks, or click blank then click option'

A"@@welcomeMsg meaning: greeting"

B"@@welcomeMsg"

C"meaning: greeting"

D"welcomeMsg"

Attempts:

3 left

💡 Hint

Common Mistakes

Putting only the ID or only the meaning without the other.

Not separating ID and meaning with a space.

The i18n attribute can include a custom ID and meaning separated by a space. The text inside the element is the message content. Here, @@welcomeMsg meaning: greeting sets ID and meaning, and the text is 'welcomeMsg' as a placeholder.

5fill in blank

hard

Fill all three blanks to create a translated message with a placeholder and description using Angular i18n.

Angular

<p i18n=[1]>[2] [3]</p>

Drag options to blanks, or click blank then click option'

A"@@greetingDesc meaning: user greeting"

BHello

C{{ userName }}

DWelcome

Attempts:

3 left

💡 Hint

Common Mistakes

Not using interpolation syntax for the placeholder.

Missing quotes around the i18n attribute value.

The i18n attribute includes a custom ID and meaning. The text includes a greeting and a placeholder for the user's name using Angular interpolation syntax.

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