Angular I18n
- 188 installs
- 6 repo stars
- Updated April 4, 2026
- oguzhan18/angular-ecosystem-skills
Adding locales, translating templates, managing ICU messages, runtime or build-time i18n, and RTL layouts for multi-market Angular applications.
About
Walks through Angular internationalization setup from marking translatable strings through locale builds, ICU formatting, and QA practices for multilingual SaaS and mobile web experiences.
- $localize and extract/merge workflow
- ICU plural and select messages
- Locale-aware routing and dates
- RTL and typography considerations
- CI checks for missing translations
Angular I18n by the numbers
- 188 all-time installs (skills.sh)
- +2 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #875 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Data as of Aug 4, 2026 (Skillselion catalog sync)
npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill angular-i18nAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 188 |
|---|---|
| repo stars | ★ 6 |
| Last updated | April 4, 2026 |
| Repository | oguzhan18/angular-ecosystem-skills ↗ |
What it does
Adding locales, translating templates, managing ICU messages, runtime or build-time i18n, and RTL layouts for multi-market Angular applications.
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;
}- Use gender-specific translations
@Component({
template: `
<p i18n="@@message">
{ gender, select, male {He} female {She} other {They} } is attending.
</p>
`
})
export class MessageComponent {}- Extract messages
ng extract-i18n --output-path src/locale- Build for multiple locales
ng build --localize- Configure locales in angular.json
{
"projects": {
"my-app": {
"i18n": {
"locales": {
"en": "src/locale/messages.en.xlf",
"es": "src/locale/messages.es.xlf",
"fr": "src/locale/messages.fr.xlf"
}
}
}
}
}- Use i18n attribute for elements
@Component({
template: `
<img i18n-title title="Logo" src="logo.png" />
<a i18n-href href="/about" hreflang="es">About</a>
`
})
export class HeaderComponent {}- Use @angular/localize for runtime translations
import { $localize } from '@angular/localize';
$localize`:@@greeting:Hello, ${name}:name:World!`;- Use ngx-translate for runtime translations
// Alternative: use @ngx-translate/core
import { TranslateModule } from '@ngx-translate/core';
@NgModule({
imports: [TranslateModule.forRoot()]
})
export class AppModule {}- Lazy load translations
// Using @ngx-translate
this.translate.getTranslation('en').subscribe(translations => {
// Load translations
});Docs Reference Index
Official Documentation
- Angular i18n - Main guide
- Angular Localize
- i18n Extraction
Tools
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFrontend Developmentfrontend