Why i18n matters in Angular - See It in Action

Why i18n matters

📖 Scenario: You are building a simple Angular app that greets users in different languages. This helps people from different countries feel welcome and understood.

🎯 Goal: Create a small Angular component that shows a greeting message. Use Angular's i18n support to prepare the app for multiple languages.

📋 What You'll Learn

Create a basic Angular component with a greeting message

Add an i18n attribute to the greeting text for translation

Set up a language variable to switch greetings

Use Angular's i18n syntax to mark the text for translation

💡 Why This Matters

🌍 Real World

Many apps need to support users from different countries. Using i18n helps show text in the user's language, making the app friendly and accessible.

💼 Career

Understanding i18n is important for frontend developers working on global applications. It shows you can prepare apps for international users.

1

Create the greeting message

Create an Angular standalone component called GreetingComponent. Inside its template, add a <h1> tag with the text Hello, welcome!.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    Hello, welcome!
  `
})
export class GreetingComponent {}

// Your code here

Need a hint?

Define a standalone component with a simple template containing the greeting text.

2

Add i18n attribute for translation

Add the Angular i18n attribute i18n to the <h1> tag in the template to mark the greeting text for translation.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    Hello, welcome!
  `
})
export class GreetingComponent {}

// Add the i18n attribute to the h1 tag

Need a hint?

Use i18n inside the opening tag to mark text for translation.

3

Add a language variable

Inside the GreetingComponent class, add a public string variable called language and set it to 'en'.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    Hello, welcome!
  `
})
export class GreetingComponent {
  // Add a language variable here
}

Need a hint?

Declare a public variable language and assign it the value 'en'.

4

Complete with i18n setup

Ensure the component template uses the i18n attribute on the greeting text and the language variable is declared in the class. This completes the basic i18n setup for the greeting message.

Angular

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

@Component({
  selector: 'app-greeting',
  standalone: true,
  template: `
    Hello, welcome!
  `
})
export class GreetingComponent {
  language: string = 'en';
  // Finalize the i18n setup here
}

Need a hint?

Check that the template has i18n and the class has the language variable.