Marking text for translation in Angular - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Angular

<p [1]="">Hello world</p>

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

Alocalize

Btranslate

CngTranslate

Di18n

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'translate' instead of 'i18n' attribute.

Trying to use a directive instead of an attribute.

The i18n attribute is used in Angular templates to mark text for translation.

2fill in blank

medium

Complete the code to add a custom description for the translation using Angular's i18n attribute.

Angular

<button [1]="'Submit button|Click to submit form'">Submit</button>

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

Ai18n-title

Bi18n

Ci18n-description

Di18n-label

Attempts:

3 left

💡 Hint

Common Mistakes

Using a separate attribute for description instead of including it in the i18n attribute.

Using 'i18n-description' which is not a valid Angular attribute.

The i18n attribute can include a description after a pipe | to help translators understand the context.

3fill in blank

hard

Fix the error in marking the placeholder text for translation in Angular.

Angular

<input [1] placeholder="Enter your name">

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

Ai18n-placeholder

Bi18n

Ctranslate-placeholder

Di18nAttr

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'i18n' on the input element instead of 'i18n-placeholder'.

Using non-Angular attributes like 'translate-placeholder'.

To mark an attribute like placeholder for translation, Angular uses i18n-placeholder.

4fill in blank

hard

Fill both blanks to mark a title attribute for translation and add a description.

Angular

<a href="#" [1] [2]="'Home link|Navigate to homepage'" title="Home">Home</a>

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

Ai18n-title

Bi18n

Ci18n-description

Di18n-attr

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'i18n-description' as a separate attribute.

Not using the correct attribute name for title translation.

Forgetting to mark the text content with i18n.

Use i18n to mark the text content and i18n-title to mark the title attribute for translation. Include description with | in the i18n-title value.

5fill in blank

hard

Complete the code to mark a button text for translation with a custom id, meaning, and description.

Angular

<button [1]="'save|Save changes button|Action to save data'">Save</button>

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

Ai18n

Bi18n-meaning

Ci18n-description

Di18n-title

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use separate attributes for id, meaning, and description.

Using non-existent attributes like 'i18n-meaning' or 'i18n-description'.

Incorrect order of id, meaning, and description in the attribute value.

The i18n attribute can include id, meaning, and description separated by pipes | in this order: id|meaning|description.