Getting Started

Set up @angular-translation-service/core in your Angular v19+ project in 3 minutes.

1. Install

npm install @angular-translation-service/core

2. Create Translation Files

Create JSON files in your project's public/ directory. Angular serves files from public/ at the root URL, so public/i18n/en/common.json is available at /i18n/en/common.json. The loader uses the pattern basePath/lang/namespace.json:

public/i18n/en/common.json

{
  "nav": {
    "home": "Home",
    "about": "About"
  },
  "greeting": "Hello, {{ name }}!"
}

3. Configure the Provider

app.config.ts

import { provideTranslation, httpLoader } from '@angular-translation-service/core';

export const appConfig = {
  providers: [
    provideTranslation({
      defaultLang: 'en',
      supportedLangs: ['en', 'pt-BR'],
      coreNamespaces: ['common'],
      loader: httpLoader('/i18n'),
    }),
  ],
};

4. Use in Components

Use select() to get a namespace signal. The @if guard handles the loading state — while the namespace loads, the recursive proxy prevents template crashes.

my-component.ts

import { TranslationService } from '@angular-translation-service/core';

@Component({
  template: `
    @let t = common();
    @if (t) {
      <h1>{{ t.nav.home }}</h1>
    }
  `,
})
export class MyComponent {
  private readonly i18n = inject(TranslationService);
  protected readonly common = this.i18n.select('common');
}

5. Alternative: Use the Pipe

For simpler cases, use TranslatePipe instead of select():

my-component.ts

import { TranslatePipe } from '@angular-translation-service/core';

@Component({
  imports: [TranslatePipe],
  template: `
    <h1>{{ 'common:nav.home' | translate }}</h1>
    <p>{{ 'common:greeting' | translate:{ name: 'Igor' } }}</p>
  `,
})

What's Next?

API Reference →View Source on GitHub ↗