@transglot/angular

A thin Angular 17+ (standalone / signals) runtime i18n adapter over @transglot/runtime. It gives you provideTransglot(), a signal-backed TransglotService, and a reactive translate pipe. Switching the locale re-renders every t(...) / | translate call site. Angular is a peer dependency; it is never bundled.

It is published in the Angular Package Format, built with ng-packagr into a partial-Ivy FESM2022 bundle (ɵɵngDeclare* declarations), so a consumer's AOT build links it like any first-party Angular library. The @angular/core peer range is broad (>=17); the build toolchain tracks the current stable line.

Install

npm install @transglot/angular @transglot/runtime @angular/core

Quickstart

Register the provider with your CDN options in bootstrapApplication:

import { bootstrapApplication } from '@angular/platform-browser';
import { provideTransglot } from '@transglot/angular';
import { AppComponent } from './app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideTransglot({
      baseUrl: 'https://app.example.com',
      project: 42,
      cdnKey: 'taicdn_…',
      locale: 'en',
    }),
  ],
});

Translate in templates with the translate pipe, or in code via the service:

import { Component, inject } from '@angular/core';
import { TransglotService, TranslatePipe } from '@transglot/angular';

@Component({
  selector: 'app-header',
  standalone: true,
  imports: [TranslatePipe],
  template: `
    <h1>{{ 'home.title' | translate }}</h1>
    <p>{{ 'cart.items' | translate: { count: 3 } }}</p>
    <p>{{ 'home.greeting' | translate: { name: 'Ada' } }}</p>

    <button (click)="toggle()">{{ i18n.locale() }}</button>
  `,
})
export class HeaderComponent {
  readonly i18n = inject(TransglotService);

  toggle(): void {
    void this.i18n.setLocale(this.i18n.locale() === 'en' ? 'fr' : 'en');
  }
}

i18n.locale() is an Angular signal and i18n.t(key, params?) reads it, so any computed() or template binding that calls them re-renders on setLocale (and on a background bundle refresh). The translate pipe is impure so it always reflects the current locale.

Already have a runtime client? Adopt it instead of options:

import { createClient } from '@transglot/runtime';
import { provideTransglot } from '@transglot/angular';

const client = createClient({ baseUrl, project, cdnKey, locale: 'en' });

provideTransglot({ client });

API

• provideTransglot(config) → EnvironmentProviders. config is the runtime ClientOptions (baseUrl, project, cdnKey, locale, …), or { client } to adopt a pre-built runtime client. Registers the client and TransglotService as application singletons; the service warms the initial locale.
• TransglotService: inject it anywhere. locale is a read-only signal; t(key, params?) is reactive (reads the locale/revision signals then delegates to the core); setLocale, loadLocale, preload mirror the runtime client.
• TranslatePipe ({{ key | translate:params }}): standalone, impure; add it to a component's imports. Reactive on locale switch.

Missing keys return the key (never throw); network/HTTP errors surface as the runtime's typed RuntimeError.