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.