@stackkit-translate/angular

Angular bindings for runtime JSON i18n, built on @stackkit-translate/core. TranslateService, translate pipe, [translate] directive, TranslateModule.forRoot/forChild, and ngx-translate-style APIs (instant, get, stream, setTranslation, reloadLang, resetLang).

Current release: 1.0.0 — Depends on @stackkit-translate/core ^1.0.0 and @stackkit-translate/enterprise ^1.0.0 (enterprise modules are licence-gated at runtime). See monorepo CHANGELOG.

Live demo & docs: translate docs — interactive demo and Angular API guide.

What's new in 1.0.0

• provideTranslateService() — standalone Angular 17+ bootstrap.
• TranslateModule.forRoot / forChild — NgModule apps with ngx-translate parity; forChild merges child loaders via provideTranslateChildMerge() unless isolate: true.
• TranslatePipe, TranslateDirective, TranslateService — template and imperative APIs.
• Optional licenseKey on config for enterprise modules (ICU, missing-report, hot-reload, TMS, SSR).

Ships as ESM TypeScript declarations. Works with Angular 17+ through 21 (@angular/core, @angular/common). Pair with @stackkit-translate/http for lazy JSON locales.

Keywords: translate i18n angular standalone ngx-translate pipe directive

Install

npm install @stackkit-translate/core @stackkit-translate/angular @stackkit-translate/http
# Peer deps: @angular/core ^17 || ^18 || ^19 || ^20 || ^21, @angular/common (same range).
# Optional enterprise features (installed as dependency; enable with licence key):
# @stackkit-translate/enterprise is bundled — pass licenseKey in provideTranslateService().

Usage — standalone (provideTranslateService)

import { ApplicationConfig } from "@angular/core";
import { provideTranslateService } from "@stackkit-translate/angular";
import { createFetchLoader } from "@stackkit-translate/http";

export const appConfig: ApplicationConfig = {
  providers: [
    provideTranslateService({
      lang: "en",
      fallbackLang: "en",
      loader: createFetchLoader({ prefix: "/assets/i18n/", suffix: ".json" })
    })
  ]
};

<h1>{{ "HOME.TITLE" | translate }}</h1>
<p [translate]="'HOME.LEAD'" [translateParams]="{ name: userName }"></p>
<button type="button" (click)="translate.use('fr')">Français</button>

import { Component, inject } from "@angular/core";
import { TranslateService } from "@stackkit-translate/angular";

@Component({ /* … */ })
export class AppComponent {
  protected readonly translate = inject(TranslateService);

  save(): void {
    const msg = this.translate.instant("DEMO.SAVED", { name: "Ada" });
  }
}

Usage — NgModule (TranslateModule)

import { NgModule } from "@angular/core";
import { TranslateModule } from "@stackkit-translate/angular";
import { createFetchLoader } from "@stackkit-translate/http";

@NgModule({
  imports: [
    TranslateModule.forRoot({
      lang: "en",
      fallbackLang: "en",
      loader: createFetchLoader({ prefix: "/assets/i18n/", suffix: ".json" })
    })
  ]
})
export class AppModule {}

Lazy feature module (shared parent TranslateService, merged loader):

TranslateModule.forChild({
  loader: createFetchLoader({ prefix: "/assets/i18n/admin/", suffix: ".json" })
})

Isolated lazy module (dedicated TranslateService):

TranslateModule.forChild({
  isolate: true,
  loader: createFetchLoader({ prefix: "/assets/i18n/feature/", suffix: ".json" })
})

Usage — language switcher

@for (lang of ["en", "fr", "de"]; track lang) {
  <button type="button" (click)="translate.use(lang)">{{ lang }}</button>
}
<p>{{ "DEMO.WELCOME" | translate: { name: "Ada" } }}</p>

Guide: Migrating from ngx-translate.

Usage — enterprise licence key

import { TRANSLATE_DEMO_LICENSE_KEY } from "@stackkit-translate/enterprise";

provideTranslateService({
  lang: "en",
  loader: createFetchLoader({ prefix: "/assets/i18n/", suffix: ".json" }),
  licenseKey: TRANSLATE_DEMO_LICENSE_KEY
});

Unlocks ICU, missing-key reporting, hot-reload, TMS sync, and SSR helpers when modules are entitled. Demo key ships in @stackkit-translate/enterprise for local prototypes only.

API

TranslateService (selected)

| Method | Description | | --- | --- | | use(lang) | Switch locale; returns Observable (ngx-translate parity). | | instant(key, params?) | Synchronous translation. | | get(key, params?) | Observable translation (updates on lang change). | | stream(key, params?) | Reactive stream for templates. | | setTranslation(lang, tree, merge?) | Merge or replace translations. | | reloadLang(lang) | Reload from loader. | | resetLang(lang) | Clear cached locale. | | getBrowserLang() | Browser language prefix. | | getCurrentLang() | Active locale id. | | onLangChange | Observable lang-change events. |

TranslatePipe / TranslateDirective

| Binding | Description | | --- | --- | | {{ key \| translate }} | Pipe with optional :params object. | | [translate]="key" | Directive; use [translateParams] for interpolation. |

Re-exports public symbols from @stackkit-translate/core (types, getDirection, plugins).

Angular vs React naming

| Angular | React | | --- | --- | | TranslateService / instant() | useTranslate().t | | TranslatePipe | t() in JSX | | provideTranslateService() | TranslateProvider |

Browser support

Requires a modern browser. For SSR, use createSsrSnapshot() / createSsrTranslate() from @stackkit-translate/enterprise to hydrate without a flash of raw keys.

Related packages

• @stackkit-translate/core — framework-agnostic engine (dependency).
• @stackkit-translate/http — createFetchLoader(), multi-file and namespace loaders.
• @stackkit-translate/enterprise — licence flags, ICU, SSR, TMS, audit export.
• @stackkit-translate/react — React provider on the same core.
• @stackkit-translate/js — vanilla bindDom() host.

License

MIT