Locale switching in Angular - Mini Project: Build & Apply

Locale Switching in Angular

📖 Scenario: You are building a simple Angular app that shows a greeting message. You want to let users switch the language of the greeting between English and Spanish.

🎯 Goal: Create an Angular standalone component that displays a greeting message. Add a button to switch the locale between English and Spanish. The greeting text should update accordingly.

📋 What You'll Learn

Create a standalone Angular component called LocaleSwitcherComponent

Use a signal called locale to store the current locale string ('en' or 'es')

Create a dictionary object called greetings with keys 'en' and 'es' and greeting messages as values

Add a button that toggles the locale signal between 'en' and 'es'

Display the greeting message based on the current locale signal

💡 Why This Matters

🌍 Real World

Locale switching is common in apps that serve users speaking different languages. This simple pattern helps you build multilingual user interfaces.

💼 Career

Understanding reactive state management and event handling in Angular is essential for frontend developer roles working on internationalized applications.

1

Set up greetings dictionary

Create a constant called greetings that is an object with two keys: 'en' with value 'Hello!' and 'es' with value '¡Hola!'.

Angular

# Your code here

Need a hint?

Use a constant object with keys 'en' and 'es' and their greeting messages.

2

Create locale signal

Inside the LocaleSwitcherComponent, create a signal called locale initialized to 'en' using Angular's signal function.

Angular

const greetings = { 'en': 'Hello!', 'es': '¡Hola!' };

// Create a signal called locale initialized to 'en'
# Your code here

Need a hint?

Use locale = signal('en') inside the component class.

3

Add toggleLocale method

Add a method called toggleLocale() inside LocaleSwitcherComponent that switches the locale signal between 'en' and 'es'.

Angular

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

const greetings = { 'en': 'Hello!', 'es': '¡Hola!' };

@Component({
  selector: 'app-locale-switcher',
  standalone: true,
  template: ``,
})
export class LocaleSwitcherComponent {
  locale = signal('en');

  // Add toggleLocale method to switch locale between 'en' and 'es'
  # Your code here
}

Need a hint?

Use this.locale.set() to update the signal inside toggleLocale().

4

Add template with button and greeting

Update the component's template to include a <button> that calls toggleLocale() on click, and a <div> that displays the greeting message from greetings based on the current locale() signal.

Angular

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

const greetings = { 'en': 'Hello!', 'es': '¡Hola!' };

@Component({
  selector: 'app-locale-switcher',
  standalone: true,
  template: `
    
    
  `,
})
export class LocaleSwitcherComponent {
  locale = signal('en');

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

Need a hint?

Use Angular template syntax with (click) event and interpolation {{ }}.