Why i18n matters in Angular - Visual Breakdown

Concept Flow - Why i18n matters

User visits app

↓

Detect user language

↓

Load translations for language

↓

Display content in user language

↓

User interacts comfortably

↓

App supports global audience

This flow shows how an app detects user language, loads translations, and displays content so users worldwide can understand and use it easily.

Execution Sample

Angular

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<h1 i18n>Hello World</h1>`
})
export class AppComponent {}

This Angular component displays a heading that will be translated based on the user's language settings.

Execution Table

Step	Action	Language Detected	Translation Loaded	Content Displayed
1	User opens app	en-US	English	Hello World
2	User changes browser language to fr	fr-FR	French	Bonjour le monde
3	User changes browser language to es	es-ES	Spanish	Hola Mundo
4	User changes browser language to unknown	xx-XX	Fallback (English)	Hello World
5	User interacts with app	xx-XX	Fallback (English)	Hello World

💡 App stops loading new translations when user language is stable or fallback is used

Variable Tracker

Variable	Start	After 1	After 2	After 3	Final
languageDetected	undefined	en-US	fr-FR	es-ES	xx-XX
translationLoaded	none	English	French	Spanish	Fallback (English)
contentDisplayed	none	Hello World	Bonjour le monde	Hola Mundo	Hello World

Key Moments - 2 Insights

Why does the app show English when the language is unknown?

The app uses a fallback language (English) when it cannot find translations for the detected language, as shown in step 4 of the execution_table.

How does the app know which translation to load?

It detects the user's browser language setting first (languageDetected variable) and loads the matching translation, as seen in steps 1-3.

Visual Quiz - 3 Questions

Look at the execution_table, what content is displayed when the languageDetected is 'fr-FR'?

A Bonjour le monde

B Hello World

C Hola Mundo

D Fallback (English)

💡 Hint

Check row 2 under Content Displayed column in execution_table

At which step does the app use the fallback language?

A Step 2

B Step 4

C Step 3

D Step 1

💡 Hint

Look for 'Fallback (English)' in Translation Loaded column in execution_table

If the user changes language from 'es-ES' to 'fr-FR', what happens to contentDisplayed?

A Stays Hola Mundo

B Changes to Hello World

C Changes from Hola Mundo to Bonjour le monde

D Changes to Fallback (English)

💡 Hint

Compare contentDisplayed values between steps 2 and 3 in variable_tracker

Concept Snapshot

Why i18n matters:
- Detect user language automatically
- Load matching translations
- Display content in user's language
- Use fallback if no translation found
- Helps app reach global users comfortably

Full Transcript

Internationalization (i18n) helps apps show content in the user's language. When a user opens the app, it detects their language setting, loads the correct translation, and displays content accordingly. If the language is unknown, the app uses a fallback language like English. This process ensures users worldwide can understand and interact with the app easily.