Docs / Angular

Angular i18n with ngx-translate, automated

Move hardcoded copy in Angular templates into the ngx-translate pipe, with control flow, bindings and aria attributes handled, and provideI18n() wired in.

How it works

Templates (.html files and inline template:) become {{ 'key' | translate }}, attributes [placeholder]="'key' | translate" ([attr.aria-label] for aria), and strings in bindings ('key' | translate).

Templates are parsed with Angular’s own compiler, so @if, @for, *ngIf and inline templates are understood. Elements using Angular’s own i18n attribute are left to it.

A sentence around a link or bold text stays one message (Angular 14+): a generated <i18n-t> renders it, with each element in an <ng-template i18nSlot>.

Before and after

The engine’s real output for this file. In a real run, the hosted model names the keys from context.

src/app/orders/orders.component.html · before

<h1>Your orders</h1>
@if (orders.length) {
  <p>Hi {{ user.name }}, your orders are on their way.</p>
} @else {
  <p>No orders yet. Read the <a routerLink="/shipping">shipping options</a> first.</p>
}
<input placeholder="Search orders" aria-label="Search" />

src/app/orders/orders.component.html · after

<h1>{{ 'orders.your_orders' | translate }}</h1>
@if (orders.length) {
  <p>{{ 'orders.hi_your_orders_are_on' | translate: { name: user.name } }}</p>
} @else {
  <p><i18n-t key="orders.no_orders_yet_read_the"><ng-template i18nSlot="a"><a routerLink="/shipping">{{ 'orders.shipping_options' | translate }}</a></ng-template></i18n-t></p>
}
<input [placeholder]="'orders.search_orders' | translate" [attr.aria-label]="'orders.search' | translate" />

locales/en.json

{
  "orders": {
    "your_orders": "Your orders",
    "hi_your_orders_are_on": "Hi {{name}}, your orders are on their way.",
    "shipping_options": "shipping options",
    "no_orders_yet_read_the": "No orders yet. Read the {{a}} first.",
    "search_orders": "Search orders",
    "search": "Search"
  }
}

What the setup adds

The first run sets up @ngx-translate/core if the project doesn’t have it yet:

@ngx-translate/core
src/app/i18n.ts bundling every locale (no HTTP loader)
provideI18n() in app.config.ts, and TranslatePipe in each standalone component that needs it

Run it

The CLI needs Node.js 22 or later.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

Or add the GitHub Action and get a pull request on every push. Try it on your own code first in the playground.