Angular I18n

A focused reference for Angular's built-in i18n system, covering everything from marking text with i18n attributes to extracting messages and building localized versions of your app. You get examples of pluralization, gender-specific translations, and attribute localization, plus configuration snippets for angular.json. It also touches on runtime translation loading with ngx-translate as an alternative approach. The best practices lean heavily on the template-based approach using i18n attributes and the $localize API, which is Angular's official path forward. If you're choosing between Angular's compile-time i18n and runtime libraries, this gives you patterns for both without much editorial guidance on the tradeoffs.

skills.sh installs: 194
GitHub stars: 7
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add oguzhan18/angular-ecosystem-skills --skill angular-i18n --agent claude-code

Installs into .claude/skills of the current project.

Files

Angular i18n

Version: Angular 21 (2025) Tags: i18n, Internationalization, Localization, Translations

References: i18n Guide • Angular Localize

API Changes

This section documents recent version-specific API changes.

NEW: @angular/localize — Built-in i18n support
NEW: $localize — Message extraction
NEW: Angular CLI i18n — Multiple language builds
NEW: Lazy-loaded translations — Runtime translation loading

Best Practices

Mark text for translation

@Component({
  template: `
    <h1 i18n="@@welcome">Welcome to our app!</h1>
    <p i18n="@@greeting">Hello, world!</p>
  `
})
export class HomeComponent {}

Use translations with placeholders

@Component({
  template: `
    <p i18n="@@userCount">
      There are { count, plural, =0 { no users } =1 { one user } other { {{ count }} users } } in the system.
    </p>
  `
})
export class UsersComponent {
  count = 5;
}