Angular i18n built-in support - Mini Project: Build & Apply

Angular i18n built-in support

📖 Scenario: You are building a simple Angular app that greets users in different languages. You want to use Angular's built-in i18n support to show the greeting message in English and Spanish.

🎯 Goal: Create an Angular standalone component that uses Angular i18n built-in support to display a greeting message. The message should be marked for translation using Angular's i18n attribute.

📋 What You'll Learn

Create a standalone Angular component named GreetingComponent

Add a heading element with the text Hello, welcome to our site!

Use Angular's i18n attribute on the heading to mark it for translation

Configure the component as standalone with the standalone: true flag

💡 Why This Matters

🌍 Real World

Many websites and apps need to support multiple languages to reach a wider audience. Angular's built-in i18n support helps developers mark text for translation and manage multiple languages easily.

💼 Career

Understanding Angular i18n is important for frontend developers working on internationalized applications, improving user experience for global users.

1

Create the GreetingComponent standalone component

Create a standalone Angular component named GreetingComponent with a template containing an h1 element that displays the text Hello, welcome to our site!.

Angular

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

@Component({
  selector: 'app-greeting',
  template: `
    Hello, welcome to our site!
  `,
  standalone: true
})
export class GreetingComponent {
  // Your code here
}

Need a hint?

Use @Component decorator with standalone: true and define the template with the greeting text inside an h1 tag.

2

Add Angular i18n attribute to the greeting message

Add the Angular i18n attribute to the h1 element in the GreetingComponent template to mark the greeting message for translation.

Angular

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

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

// Add the i18n attribute to the h1 element

Need a hint?

Add i18n inside the opening h1 tag to mark the text for translation.

3

Add a language selector variable

Inside the GreetingComponent class, create a public variable named currentLang and set it to the string 'en' to represent the current language.

Angular

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

@Component({
  selector: 'app-greeting',
  template: `
    Hello, welcome to our site!
  `,
  standalone: true
})
export class GreetingComponent {
  currentLang = 'en'; // Your code here
}

Need a hint?

Declare a public variable currentLang inside the class and assign it the string 'en'.

4

Add a language toggle method

Add a public method named toggleLanguage() inside the GreetingComponent class that switches currentLang between 'en' and 'es' when called.

Angular

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

@Component({
  selector: 'app-greeting',
  template: `
    Hello, welcome to our site!
  `,
  standalone: true
})
export class GreetingComponent {
  currentLang = 'en';

  toggleLanguage() {
    // Your code here
  }
}

Need a hint?

Use a ternary operator inside toggleLanguage() to switch currentLang between 'en' and 'es'.