Marking text for translation in Angular - Mini Project: Build & Apply

Marking Text for Translation in Angular

📖 Scenario: You are building a simple Angular app that will support multiple languages. To prepare your app for translation, you need to mark certain text strings so that translation tools can find them.

🎯 Goal: Create an Angular component that marks text for translation using Angular's i18n attribute.

📋 What You'll Learn

Create an Angular standalone component named TranslateExampleComponent.

Add a heading with the text Welcome to our site marked for translation using the i18n attribute.

Add a paragraph with the text Enjoy your stay! also marked for translation.

Use Angular's recommended syntax for marking text for translation.

💡 Why This Matters

🌍 Real World

Marking text for translation is essential when building apps that support multiple languages, making your app accessible to a global audience.

💼 Career

Many companies require developers to prepare their Angular apps for internationalization to reach users worldwide.

1

Create the Angular component skeleton

Create a standalone Angular component named TranslateExampleComponent with a selector app-translate-example and an empty template.

Angular

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

@Component({
  selector: 'app-translate-example',
  standalone: true,
  template: `
    
  `
})
export class TranslateExampleComponent {
}

Need a hint?

Use @Component decorator with standalone: true and an empty template string.

2

Add a heading marked for translation

Inside the template of TranslateExampleComponent, add an <h1> element with the text Welcome to our site and mark it for translation using the i18n attribute.

Angular

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

@Component({
  selector: 'app-translate-example',
  standalone: true,
  template: `
     with i18n attribute here -->
  `
})
export class TranslateExampleComponent {
}

Need a hint?

Use i18n attribute inside the <h1> tag to mark text for translation.

3

Add a paragraph marked for translation

Below the heading, add a <p> element with the text Enjoy your stay! and mark it for translation using the i18n attribute.

Angular

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

@Component({
  selector: 'app-translate-example',
  standalone: true,
  template: `
    Welcome to our site
     with i18n attribute here -->
  `
})
export class TranslateExampleComponent {
}

Need a hint?

Use i18n attribute inside the <p> tag to mark text for translation.

4

Complete the component with proper formatting

Ensure the component template includes both the <h1> and <p> elements with their i18n attributes, properly formatted and ready for translation.

Angular

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

@Component({
  selector: 'app-translate-example',
  standalone: true,
  template: `
    Welcome to our site
    Enjoy your stay!
  `
})
export class TranslateExampleComponent {
}

// Component is complete

Need a hint?

Check that both elements have the i18n attribute and the correct text inside the template string.