Bird
Raised Fist0
Angularframework~10 mins

Why i18n matters in Angular - Test Your Understanding

Choose your learning style10 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Practice - 5 Tasks
Answer the questions below
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.
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.
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.
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.
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.

Practice

(1/5)
1. Why is i18n important in Angular applications?
easy
A. It improves the app's loading speed significantly.
B. It allows the app to support multiple languages for users worldwide.
C. It automatically fixes bugs in the code.
D. It changes the app's color scheme based on user preference.

Solution

  1. Step 1: Understand the purpose of i18n

    i18n stands for internationalization, which means preparing the app to support different languages.

  2. Step 2: Identify the benefit in Angular apps

    Using i18n attributes in Angular helps translate text so users worldwide can understand the app.

  3. Final Answer:

    It allows the app to support multiple languages for users worldwide. -> Option B

  4. Quick Check:

    i18n = multi-language support [OK]
Hint: i18n means internationalization for language support [OK]
Common Mistakes:
  • Thinking i18n improves speed
  • Confusing i18n with bug fixing
  • Believing i18n changes colors
2. Which of the following is the correct way to mark a text for translation in Angular templates?
easy
A. <h1 i18>Welcome</h1>
B. <h1 translate>Welcome</h1>
C. <h1 lang>Welcome</h1>
D. <h1 i18n>Welcome</h1>

Solution

  1. Step 1: Recall Angular i18n syntax

    Angular uses the i18n attribute to mark text for translation in templates.

  2. Step 2: Compare options

    Only <h1 i18n>Welcome</h1> uses the correct i18n attribute syntax.

  3. Final Answer:

    <h1 i18n>Welcome</h1> -> Option D

  4. Quick Check:

    Correct i18n attribute = <h1 i18n>Welcome</h1> [OK]
Hint: Look for exact 'i18n' attribute in template tags [OK]
Common Mistakes:
  • Using 'translate' instead of 'i18n'
  • Using 'lang' attribute incorrectly
  • Misspelling 'i18n' as 'i18'
3. Given this Angular template snippet:
<button i18n>Submit</button>

What will happen when you build the app with i18n enabled and provide translations?
medium
A. The button text will remain 'Submit' regardless of language.
B. The app will throw a syntax error during build.
C. The button text will change to the translated word based on user locale.
D. The button will disappear from the UI.

Solution

  1. Step 1: Understand i18n attribute effect

    The i18n attribute marks text for translation during build.

  2. Step 2: Effect of providing translations

    When translations exist, Angular replaces the original text with the translated version based on user locale.

  3. Final Answer:

    The button text will change to the translated word based on user locale. -> Option C

  4. Quick Check:

    i18n + translations = translated text [OK]
Hint: i18n text changes with user language if translations exist [OK]
Common Mistakes:
  • Assuming text never changes
  • Expecting build errors without syntax issues
  • Thinking UI elements disappear
4. You added i18n attributes to your Angular app but translations are not showing. What is a likely cause?
medium
A. You forgot to generate and include translation files during build.
B. You used i18n on HTML tags instead of components.
C. You did not import the Angular FormsModule.
D. You used double quotes instead of single quotes in templates.

Solution

  1. Step 1: Check translation file usage

    Adding i18n marks text but translations require generated files included in build.

  2. Step 2: Identify common mistake

    Forgetting to generate or include translation files means no translated text appears.

  3. Final Answer:

    You forgot to generate and include translation files during build. -> Option A

  4. Quick Check:

    Missing translation files = no translations shown [OK]
Hint: Always generate and include translation files after adding i18n [OK]
Common Mistakes:
  • Thinking i18n works without translation files
  • Confusing i18n usage with FormsModule
  • Worrying about quote styles in templates
5. You want your Angular app to support English and Spanish using i18n. Which steps must you follow to achieve this?
hard
A. Mark text with i18n, extract messages, create Spanish translation file, build app with Spanish locale.
B. Use i18n only on components, no need for translation files, Angular auto-translates.
C. Add i18n attributes, write translations inline in templates, no build changes needed.
D. Install a third-party library, ignore Angular i18n, manually change text in code.

Solution

  1. Step 1: Mark text for translation

    Use i18n attributes in templates to identify text needing translation.

  2. Step 2: Extract and create translation files

    Extract messages to generate a base file, then create a Spanish translation file with translated text.

  3. Step 3: Build app with Spanish locale

    Build the Angular app specifying the Spanish locale to use the translations at runtime.

  4. Final Answer:

    Mark text with i18n, extract messages, create Spanish translation file, build app with Spanish locale. -> Option A

  5. Quick Check:

    Proper i18n workflow = Mark text with i18n, extract messages, create Spanish translation file, build app with Spanish locale. [OK]
Hint: Follow full i18n workflow: mark, extract, translate, build [OK]
Common Mistakes:
  • Expecting auto-translation without files
  • Writing translations inline in templates
  • Ignoring Angular's i18n system