Angular

@transglot/angular connects @transglot/runtime to Angular 17 or later, with standalone APIs and signals. Templates and computed() values that translate update when the locale changes or a new publish lands for the active locale.

The package is published in the Angular Package Format (partial Ivy), so your build links it like any Angular library.

InstallCopy Anchor Link

npm install @transglot/angular

@angular/core is a peer dependency. @transglot/runtime is installed with the package, and createClient, RuntimeError and the RuntimeClient and ClientOptions types are re-exported from it.

Minimal setupCopy Anchor Link

Register the provider when you bootstrap the app:

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

bootstrapApplication(AppComponent, {
  providers: [
    provideTransglot({
      baseUrl: 'https://api.transglot.ai',
      project: 42,
      cdnKey: 'taicdn_your_key',
      locale: 'en',
      authIn: 'query',
    }),
  ],
});

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

import { Component, computed, 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>{{ greeting() }}</p>
    <button (click)="toggle()">{{ i18n.locale() }}</button>
  `,
})
export class HeaderComponent {
  readonly i18n = inject(TransglotService);
  readonly greeting = computed(() => this.i18n.t('home.greeting', { name: 'Ada' }));

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

The service starts loading the initial locale when it is created and does not wait for it. Until the bundle arrives, translations return keys; bindings update when it lands.

APICopy Anchor Link

provideTransglot(config)Copy Anchor Link

provideTransglot(config: TransglotConfig): EnvironmentProviders

config is either the runtime ClientOptions or { client } with a client you created. It registers the client under the TRANSGLOT_CLIENT token and TransglotService, one of each for the environment injector you add it to. Add it to bootstrapApplication for an app-wide instance.

TransglotServiceCopy Anchor Link

TranslatePipeCopy Anchor Link

{{ key | translate }} or {{ key | translate: params }}. A standalone pipe named translate: add TranslatePipe to a component's imports. It is impure, so it re-evaluates on every change detection pass, and it reads the locale signal, so zoneless and OnPush components update on a locale switch too.

TRANSGLOT_CLIENTCopy Anchor Link

The InjectionToken<RuntimeClient> holding the runtime client. Inject it when you need a client method the service does not expose, such as refresh() or onChange():

import { inject } from '@angular/core';
import { TRANSGLOT_CLIENT } from '@transglot/angular';

const client = inject(TRANSGLOT_CLIENT);
await client.refresh();

ErrorsCopy Anchor Link

The service does not catch a failed first load, and setLocale rejects with the runtime's RuntimeError (see Errors). To handle the first load yourself, create the client, load the locale, then bootstrap with { client }:

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

const client = createClient({
  baseUrl: 'https://api.transglot.ai',
  project: 42,
  cdnKey: 'taicdn_your_key',
  locale: 'en',
  authIn: 'query',
});

client
  .loadLocale('en')
  .catch((error: unknown) => {
    if (error instanceof RuntimeError) console.error(error.slug, error.hint);
  })
  .finally(() =>
    bootstrapApplication(AppComponent, {
      providers: [provideTransglot({ client })],
    }),
  );

RelatedCopy Anchor Link

• JavaScript runtime
• Runtime SDKs overview