Why i18n matters in Angular - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the Angular i18n module.

Angular

import { [1] } from '@angular/localize';

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

Ai18nModule

Btranslate

Clocalize

Dlocale

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'translate' instead of 'localize'.

Trying to import a module named 'i18nModule' which does not exist.

The localize function is imported from '@angular/localize' to enable internationalization features.

2fill in blank

medium

Complete the code to mark a text for translation in an Angular template.

Angular

<p i18n>[1]</p>

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

AHello, world!

Btranslate

Clocalize

Di18n

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using 'translate' or 'localize' as text content.

Text inside the element marked with i18n attribute is extracted for translation. The actual text is 'Hello, world!'.

3fill in blank

hard

Fix the error in the Angular component to use the i18n pipe correctly.

Angular

<p>{{ 'WELCOME' | [1] }}</p>

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

Ai18n

Blocalize

Ctranslate

Duppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'translate' pipe which is not built-in Angular.

Using 'localize' pipe which does not exist.

The correct pipe for Angular internationalization is i18n. It tells Angular to translate the string key.

4fill in blank

hard

Fill both blanks to create a translation file reference and load it in Angular.

Angular

const translations = require('[1]');
@NgModule({
  providers: [{ provide: TRANSLATIONS, useValue: [2] }]
})

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

A./locale/messages.fr.xlf

Btranslations

C./locale/messages.de.xlf

Dmessages

Attempts:

3 left

💡 Hint

Common Mistakes

Using the German translation file path instead of French.

Using a string literal instead of the variable for translations.

The translation file path is './locale/messages.fr.xlf' and the loaded content is stored in the variable translations.

5fill in blank

hard

Fill all three blanks to set up Angular i18n with locale, translations, and bootstrap.

Angular

import { [1] } from '@angular/core';
import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';

@NgModule({
  providers: [
    { provide: TRANSLATIONS, useValue: [2] },
    { provide: TRANSLATIONS_FORMAT, useValue: '[3]' },
    { provide: LOCALE_ID, useValue: 'fr' }
  ]
})
export class AppModule {}

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

ANgModule

Btranslations

Cxlf

DComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Importing 'Component' instead of 'NgModule'.

Using a wrong format string like 'json' instead of 'xlf'.

Passing a string instead of the translations variable.

We import NgModule to define the module, use the translations variable for translation content, and specify the format as 'xlf' for XML Localization Interchange File Format.