Locale switching in Angular - Step-by-Step Execution

Concept Flow - Locale switching

User selects locale

↓

Trigger locale change signal

↓

Angular updates locale signal

↓

Components detect locale change

↓

Components re-render with new locale

↓

UI shows text in selected language

The user picks a language, Angular updates the locale signal, components react and update their displayed text accordingly.

Execution Sample

Angular

import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `<p>{{ locale() === 'en' ? 'Hello' : 'Hola' }}</p><button (click)="switchLocale()">Switch</button>`
})
export class AppComponent {
  locale = signal('en');

  switchLocale() {
    this.locale.set(this.locale() === 'en' ? 'es' : 'en');
  }
}

A simple Angular component that switches displayed greeting between English and Spanish when a button is clicked.

Execution Table

Step	Action	Locale Signal Value	Component Render Output	Notes
1	Initial load	en	Hello	Locale signal starts as 'en', shows English greeting
2	User clicks switch button	en	Hello	Before switchLocale runs, still 'en'
3	switchLocale() called	es	Hello	Locale signal updated to 'es', but render not updated yet
4	Angular detects signal change	es	Hola	Component re-renders with Spanish greeting
5	User clicks switch button again	es	Hola	Before switchLocale runs, still 'es'
6	switchLocale() called	en	Hola	Locale signal updated back to 'en'
7	Angular detects signal change	en	Hello	Component re-renders with English greeting
8	No more clicks	en	Hello	Execution stops, user sees English greeting

💡 Execution stops when user stops clicking; locale signal remains stable and UI shows matching greeting.

Variable Tracker

Variable	Start	After Step 3	After Step 6	Final
locale	'en'	'es'	'en'	'en'
Component Render Output	'Hello'	'Hello' (before re-render)	'Hola' (before re-render)	'Hello'

Key Moments - 2 Insights

Why does the component still show 'Hello' immediately after switchLocale() changes the locale signal?

Because Angular updates the UI after detecting the signal change asynchronously; the render output updates in the next step (see steps 3 and 4 in execution_table).

How does Angular know to re-render the component when the locale changes?

Angular tracks the signal 'locale' used in the template; when locale.set() is called, Angular triggers change detection and re-renders components using that signal (see step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the locale signal value at Step 6?

A 'es'

B 'en'

C 'fr'

D 'de'

💡 Hint

Check the 'Locale Signal Value' column at Step 6 in the execution_table.

At which step does the component first show the Spanish greeting 'Hola'?

A Step 4

B Step 3

C Step 5

D Step 7

💡 Hint

Look at the 'Component Render Output' column in the execution_table.

If the initial locale signal was set to 'es' instead of 'en', what would the initial render output be?

A 'Hello'

B Empty string

C 'Hola'

D Error

💡 Hint

Refer to the variable_tracker 'locale' start value and corresponding render output.

Concept Snapshot

Locale switching in Angular uses signals to track the current language.
User actions update the locale signal.
Angular detects signal changes and re-renders components.
Templates use locale signal to show text in the selected language.
This enables dynamic UI language changes without page reload.

Full Transcript

Locale switching in Angular works by using a signal to hold the current language code, like 'en' or 'es'. When the user clicks a button, a function updates this signal to the other language. Angular notices this change and re-renders the component that uses the locale signal in its template. The displayed text changes accordingly, for example from 'Hello' to 'Hola'. This process happens step-by-step: initial render shows English, user clicks switch, signal updates to Spanish, Angular re-renders, and the UI updates. This allows smooth language switching in the app.