Angular i18n built-in support

Introduction

Angular i18n helps you make your app speak different languages easily. It changes text based on the user's language.

You want your app to show text in English, Spanish, or other languages.

You need to support users from different countries with their own language.

You want to prepare your app for future languages without big changes.

You want to keep your app accessible and friendly for everyone.

Syntax

Angular

<div i18n>Welcome to our app!</div>

<!-- In TypeScript -->
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

The i18n attribute marks text for translation.

Angular extracts these texts to create translation files.

Examples

Simple text marked for translation.

Angular

<h1 i18n>Home Page</h1>

Text with a custom translation ID for clarity.

Angular

<button i18n="@@saveBtn">Save</button>

Text with dynamic content using Angular pipes.

Angular

<p i18n>Today is {{ today | date }}</p>

Sample Program

This simple component shows how to mark text for translation using i18n. When you extract and add translations, Angular will replace the text based on the user's language.

Angular

/* app.component.html */
<div i18n>Hello, welcome to our app!</div>

/* app.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  today = new Date();
}

/* Usage: Run Angular i18n extraction and build with translations to see text change */

Important Notes

Use the Angular CLI command ng extract-i18n to get translation files.

Translations are stored in XLIFF or other supported formats.

You need to build your app separately for each language to serve translated versions.

Summary

Angular i18n uses the i18n attribute to mark text for translation.

Extract translations with Angular CLI and provide translated files.

Build your app for each language to serve users in their language.