ngx-translate

https://ngx-translate.org/
Admin
ngx-translate is a leading localization library for Angular, offering flexible, easy-to-use, and...
Tokens:61,590
Snippets:593
Trust Score:6
Update:6 days ago
Show doc for...
Tokens:
Raw
### get method usage examples

Source: https://ngx-translate.org/reference/translate-service-api

Examples of using get with a single key, an array of keys, interpolation parameters, and the per-call lang parameter. Each example logs the emitted translation.

```typescript
translate.get('HELLO').subscribe((res) => console.log(res));
// 'Hello'


translate.get(['HELLO', 'WELCOME']).subscribe((res) => console.log(res));
// { HELLO: 'Hello', WELCOME: 'Welcome' }


translate.get('WELCOME_USER', { username: 'John' }).subscribe((res) => console.log(res));
// 'Welcome, John!'


// Per-call lang (new in v18): look up in German regardless of current lang
translate.get('HELLO', undefined, 'de').subscribe((res) => console.log(res));
// 'Hallo'
```

--------------------------------

### Install @ngx-translate/http-loader with npm

Source: https://ngx-translate.org/getting-started/translation-files

Install the http-loader package using npm.

```bash
npm i @ngx-translate/http-loader
```

--------------------------------

### Install @ngx-translate/http-loader with yarn

Source: https://ngx-translate.org/getting-started/translation-files

Install the http-loader package using yarn.

```bash
yarn add @ngx-translate/http-loader
```

--------------------------------

### Install @ngx-translate/http-loader with pnpm

Source: https://ngx-translate.org/getting-started/translation-files

Install the http-loader package using pnpm.

```bash
pnpm add @ngx-translate/http-loader
```

--------------------------------

### instant usage examples

Source: https://ngx-translate.org/reference/translate-service-api

Examples of instant() with a single key, an array, interpolation parameters, and a per-call language override. The per-call lang bypasses the current/fallback chain.

```typescript
const res = translate.instant('HELLO');
// 'Hello'
```

```typescript
translate.instant(['HELLO', 'WELCOME']);
// { HELLO: 'Hello', WELCOME: 'Welcome' }
```

```typescript
translate.instant('WELCOME_USER', { username: 'John' });
// 'Welcome, John!'
```

```typescript
// Per-call lang
translate.instant('HELLO', undefined, 'fr');
// 'Bonjour'
```

--------------------------------

### set usage examples

Source: https://ngx-translate.org/reference/translate-service-api

Examples of setting a single translation value with and without specifying a language. The key is dot-separated, and the language defaults to the current one when omitted.

```typescript
translate.set('HELLO.WORLD', 'Hallo World!');
translate.set('HELLO.WORLD', 'Hallo Welt!', 'de');
```

--------------------------------

### Install ngx-translate with npm, pnpm, or yarn

Source: https://ngx-translate.org/getting-started/installation

Install the ngx-translate npm modules using the npm, pnpm, or yarn package manager. The @ngx-translate/http-loader package is optional; use it to load translation files on demand from your server.

```bash
npm i @ngx-translate/core @ngx-translate/http-loader
```

```bash
pnpm add @ngx-translate/core @ngx-translate/http-loader
```

```bash
yarn add @ngx-translate/core @ngx-translate/http-loader
```

--------------------------------

### setFallbackLang usage example

Source: https://ngx-translate.org/reference/translate-service-api

Example of setting the fallback language and subscribing to the returned observable to log when the load finishes.

```typescript
translate.setFallbackLang('en').subscribe(() => {
  console.log('Fallback set to English');
});
```

--------------------------------

### getStreamOnTranslationChange examples

Source: https://ngx-translate.org/reference/translate-service-api

Examples of subscribing to getStreamOnTranslationChange with a single key, an array of keys, and with interpolation parameters. The subscription is unsubscribed at the end.

```typescript
const sub = translate
  .getStreamOnTranslationChange('HELLO')
  .subscribe((res) => console.log(res));
```

```typescript
const subMulti = translate
  .getStreamOnTranslationChange(['HELLO', 'WELCOME'])
  .subscribe((res) => console.log(res));
```

```typescript
const subParams = translate
  .getStreamOnTranslationChange('WELCOME_USER', { username: 'John' })
  .subscribe((res) => console.log(res));
```

```typescript
sub.unsubscribe();
```

--------------------------------

### getTranslations usage example

Source: https://ngx-translate.org/reference/translate-service-api

Example of retrieving the English translations and accessing a key. The underlying state is immutable; re-call after a write to see updates.

```typescript
const en = translate.getTranslations('en');
console.log(en.HELLO); // 'Hello'
```

--------------------------------

### Flat translation file structure

Source: https://ngx-translate.org/getting-started/translation-files

Example of a flat JSON translation file with keys like 'app.hello' and 'app.title'. Use this structure for a simple, non-hierarchical key-value mapping.

```json
{
  "app.hello": "hello {{value}}",
  "app.title": "Translation Demo"
}
```

--------------------------------

### Configure provideTranslateService with basic setup

Source: https://ngx-translate.org/getting-started/installation

Basic configuration for ngx-translate using the provideTranslateService() function in the appConfig. Sets the fallback language and initial language to 'en'.

```typescript
import {ApplicationConfig, provideZoneChangeDetection} from "@angular/core";
import {provideTranslateService} from "@ngx-translate/core";


export const appConfig: ApplicationConfig = {
  providers: [
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideTranslateService({
      fallbackLang: 'en',
      lang: 'en'
    })
  ],
};
```

--------------------------------

### Switch language with use()

Source: https://ngx-translate.org/reference/translate-service-api

Example of switching to French with use('fr') and logging when the language is loaded. Subscribers to stream(), currentLang, or onLangChange receive updates.

```typescript
translate.use('fr').subscribe(() => {
  console.log('Current language is now French.');
});
```

--------------------------------

### Per-call lang usage examples

Source: https://ngx-translate.org/reference/translate-service-api

Examples of using the per-call lang parameter to bypass the current/fallback chain. Use it to display a phrase in a fixed language or to look up data during a language switch. Pre-load via use(lang) or setTranslation(lang, ...) to avoid console.warn from instant().

```typescript
// Always render this label in English
englishLabel = this.translate.translate('LABEL', undefined, 'en');


// One-shot read from a specific language
const fr = this.translate.instant('TITLE', undefined, 'fr');
```

--------------------------------

### get

Source: https://ngx-translate.org/reference/translate-service-api

Retrieves the translation(s) for the specified key(s). The Observable emits once translations have finished loading, then completes.

```APIDOC
## get

### Description
Retrieves the translation(s) for the specified key(s). The `Observable` emits once translations have finished loading, then completes.

### Signature
```typescript
get(
  key: string | string[],
  interpolateParams?: InterpolationParameters,
  lang?: Language,
): Observable<Translation>
```

### Parameters
- **key** (`string | string[]`) - Required - A single key or an array of keys.
- **interpolateParams** (`InterpolationParameters`) - Optional - Interpolation values.
- **lang** (`Language`) - Optional - Look up translations in a specific language, bypassing the current/fallback chain. (New in v18)

### Returns
- Single key → emits a `Translation`.
- Array of keys → emits an object `{ [key]: Translation }`.
- Missing key → returns the key itself unless a fallback resolves it.

### Examples
```typescript
translate.get('HELLO').subscribe((res) => console.log(res));
// 'Hello'

translate.get(['HELLO', 'WELCOME']).subscribe((res) => console.log(res));
// { HELLO: 'Hello', WELCOME: 'Welcome' }

translate.get('WELCOME_USER', { username: 'John' }).subscribe((res) => console.log(res));
// 'Welcome, John!'

// Per-call lang (new in v18): look up in German regardless of current lang
translate.get('HELLO', undefined, 'de').subscribe((res) => console.log(res));
// 'Hallo'
```

```

--------------------------------

### TranslateModule removal migration example

Source: https://ngx-translate.org/20-reference/90-release-notes

Shows the v17 TranslateModule.forRoot() configuration and the v18 replacement using provideTranslateService() with provider functions, plus the component imports change from TranslateModule to TranslatePipe and TranslateDirective.

```typescript
// v17
@NgModule({
    imports: [
        TranslateModule.forRoot({
            loader: { provide: TranslateLoader, useClass: MyLoader },
            compiler: { provide: TranslateCompiler, useClass: MyCompiler },
            parser: { provide: TranslateParser, useClass: MyParser },
            missingTranslationHandler: { provide: MissingTranslationHandler, useClass: MyHandler },
            defaultLanguage: "en",
        }),
    ],
})
```

```typescript
// v18 — in bootstrapApplication() or route config
providers: [
    provideTranslateService({
        loader: provideTranslateLoader(MyLoader),
        compiler: provideTranslateCompiler(MyCompiler),
        parser: provideTranslateParser(MyParser),
        missingTranslationHandler: provideMissingTranslationHandler(MyHandler),
        fallbackLang: "en",
    }),
]
```

```typescript
// Component imports (replace TranslateModule in component imports)
@Component({
    imports: [TranslatePipe, TranslateDirective],
})
```

--------------------------------

### Translation file using ${} syntax

Source: https://ngx-translate.org/recipes/write-own-parser

Example JSON translation file that uses the custom ${} interpolation syntax.

```JSON
{
  "HELLO": "Hello ${name}!",
  "WELCOME": "Welcome to ${appName}, ${name}!"
}
```

--------------------------------

### Subscribe to stream() and unsubscribe

Source: https://ngx-translate.org/reference/translate-service-api

Example of subscribing to stream('HELLO') and unsubscribing. The observable re-emits on language changes but does not complete.

```typescript
const sub = translate.stream('HELLO').subscribe((res) => console.log(res));
sub.unsubscribe();
```

--------------------------------

### Example warning for missingTranslationHandler

Source: https://ngx-translate.org/reference/translate-service-api

Concrete warning output when passing a bare class to the missingTranslationHandler slot, e.g., provideTranslateService({ missingTranslationHandler: MyHandler }).

```text
@ngx-translate/core: "missingTranslationHandler" received a bare class (MyHandler);
auto-wrapping with provideMissingTranslationHandler(). For clarity, prefer
missingTranslationHandler: provideMissingTranslationHandler(MyHandler).

```

--------------------------------

### Walk getParent chain with inject

Source: https://ngx-translate.org/reference/translate-service-api

Example of using getParent() to introspect the service chain at runtime without reaching into protected fields.

```typescript
let svc: TranslateService | null = inject(TranslateService);
while (svc) {
  console.log(svc);
  svc = svc.getParent();
}
```

--------------------------------

### currentLang signal migration example

Source: https://ngx-translate.org/20-reference/90-release-notes

Shows the v17 string getter usage and the v18 signal call. In v18, currentLang returns a Signal<Language | null> and must be called as a function.

```typescript
// v17
if (service.currentLang === "en") { ... }
```

```typescript
// v18
if (service.currentLang() === "en") { ... }
```

--------------------------------

### use() loader failure rollback

Source: https://ngx-translate.org/reference/translate-service-api

Example of handling a loader failure with use(). On error, currentLang is rolled back to the previous value. Subscribe to the error to surface the failure to the user.

```typescript
translate.use('fr').subscribe({
  next: () => { /* loaded */ },
  error: (err) => {
    // currentLang is unchanged. Safe to re-render against the previous language.
    console.error('Failed to load French translations', err);
  },
});
```

--------------------------------

### Nested translation file structure

Source: https://ngx-translate.org/getting-started/translation-files

Example of a nested JSON translation file with a tree hierarchy under the 'app' key. This structure is preferred for better organization and smaller file sizes.

```json
{
  "app": {
    "hello": "hello {{value}}",
    "title": "Translation Demo"
  }
}
```

--------------------------------

### Markdown-formatted translation file

Source: https://ngx-translate.org/recipes/custom-compiler-guide

Example JSON translation file with markdown formatting in values, including bold, italic, and link syntax. The custom compiler transforms these into HTML.

```json
{
  "welcome": "**Welcome** to our *amazing* application!",
  "contact": "Need help? [Contact us](mailto:support@example.com)",
  "nested": {
    "message": "This text has **bold** and *italic* formatting"
  }
}
```

--------------------------------

### provideTranslateService root configuration in appConfig

Source: https://ngx-translate.org/reference/configuration

Configures the root TranslateService at app bootstrap. Use it once in appConfig or in bootstrapApplication providers. The example sets a loader via provideTranslateHttpLoader, fallbackLang 'en', and initial lang 'de'. Note that top-level provideTranslate* calls in the same providers array are not picked up; nest plugin helpers inside the config object.

```TypeScript
import { ApplicationConfig } from '@angular/core';
import { provideHttpClient } from '@angular/common/http';
import { provideTranslateService, provideTranslateLoader } from '@ngx-translate/core';
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';


export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTranslateService({
      loader: provideTranslateHttpLoader({ prefix: '/assets/i18n/' }),
      fallbackLang: 'en',
      lang: 'de',
    }),
  ],
};

```

--------------------------------

### Example translation object returned by getTranslation

Source: https://ngx-translate.org/reference/translate-loader-api

Shows the shape of the translation object that getTranslation resolves to, with a key-value pair mapping a translation key to its string value.

```json
{
  "app.hello": "Hello World!"
}
```

--------------------------------

### Factory form for custom parser registration

Source: https://ngx-translate.org/reference/translate-parser-api

Shows the factory form of provideTranslateParser, used when the parser needs configuration from inject(). The example passes a factory that creates MyParser with a strict option.

```typescript
provideTranslateService({
  parser: provideTranslateParser(() => new MyParser({ strict: true })),
})
```

--------------------------------

### AppComponent using translate pipe with empty handler

Source: https://ngx-translate.org/recipes/fix-translation-loading-glitches

Example component that uses the translate pipe for 'WELCOME' and 'DESCRIPTION'. With the custom handler, the content appears empty initially and fills in as translations load.

```TypeScript
import { Component, inject, OnInit } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';


@Component({
  selector: 'app-root',
  template: `
    <h1>{{ 'WELCOME' | translate }}</h1>
    <p>{{ 'DESCRIPTION' | translate }}</p>
    <!-- Content will appear empty initially, then fill in as translations load -->
  `
})
export class AppComponent implements OnInit {
  private translate = inject(TranslateService);


  ngOnInit() {
    this.translate.setFallbackLang('en');
    this.translate.use('en');
  }
}

```

--------------------------------

### Request translation in a specific language with lang parameter

Source: https://ngx-translate.org/getting-started/translating-your-components

get(), instant(), stream(), and translate() accept an optional third lang parameter to bypass the current/fallback chain. The example shows instant() with 'de' and get() with 'fr'.

```TypeScript
// Always returns the German text, regardless of the current language
const greetingDe = this.translate.instant('app.hello', { name: 'Welt' }, 'de');


this.translate.get('app.hello', { name: 'John' }, 'fr').subscribe(text => {
  console.log(text); // French
});
```

--------------------------------

### Mock ITranslateService for TestBed

Source: https://ngx-translate.org/resources/faq

Provides a partial mock of ITranslateService under the TranslateService token. Use jasmine spies for get and instant, and a signal for currentLang. This setup lets TypeScript catch API drift against the abstract class.

```typescript
import { ITranslateService, TranslateService } from '@ngx-translate/core';
import { of } from 'rxjs';
import { signal } from '@angular/core';


const mockTranslateService: Partial<ITranslateService> = {
  get: jasmine.createSpy().and.returnValue(of('translated')),
  instant: jasmine.createSpy().and.returnValue('translated'),
  currentLang: signal<string | null>('en'),
};


TestBed.configureTestingModule({
  providers: [
    { provide: TranslateService, useValue: mockTranslateService },
  ],
});
```

--------------------------------

### instant()

Source: https://ngx-translate.org/reference/translate-service-api

Synchronous lookup. Returns the key itself if translations aren’t loaded yet.

```APIDOC
## instant(key, interpolateParams?, lang?)

### Description
Synchronous lookup. Returns the key itself if translations aren’t loaded yet.

### Parameters
- **key** (string | string[]) - Required - Single key or array.
- **interpolateParams** (InterpolationParameters) - Optional - Interpolation values.
- **lang** (Language) - Optional - Per-call language override. When provided, `instant()` bypasses the current/fallback chain and reads from that language directly. If the language hasn’t been loaded, ngx-translate emits a one-shot `console.warn` per unloaded language.

### Return Type
`Translation`

### Notes
`instant()` is synchronous. With the default HTTP loader, translations load asynchronously. Call `instant()` only after a load has finished, or use `get()` which waits.

### Examples
```typescript
const res = translate.instant('HELLO');
// 'Hello'

translate.instant(['HELLO', 'WELCOME']);
// { HELLO: 'Hello', WELCOME: 'Welcome' }

translate.instant('WELCOME_USER', { username: 'John' });
// 'Welcome, John!'

// Per-call lang
translate.instant('HELLO', undefined, 'fr');
// 'Bonjour'
```
```

--------------------------------

### Service Method: service.instant('KEY')

Source: https://ngx-translate.org/reference/concepts

Returns a synchronous Translation value for one-shot reads where reactivity is not needed.

```APIDOC
## Service Method: service.instant('KEY')

### Description
Returns a synchronous Translation value for one-shot reads where reactivity is not needed.

### Usage
Use when you need the translation immediately without subscribing.

### Parameters
- **KEY** (string) - Required - The translation key.

### Returns
- `Translation` - The translation value.

### Example
```typescript
const translation = service.instant('HELLO');
```
```

--------------------------------

### Inject TranslateService and use get() with _() marker

Source: https://ngx-translate.org/getting-started/translating-your-components

Use Angular's inject() to get TranslateService. The _() function marks translation IDs for extraction tools. The get() method returns an observable that emits when the translation file is loaded.

```TypeScript
import {Component, inject} from '@angular/core';
import {TranslateService, _} from "@ngx-translate/core";


@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class YourComponent {
  private translate = inject(TranslateService);


  constructor() {
    this.translate.get(_('app.hello'), {value: 'world'}).subscribe((res: string) => {
      console.log(res);
      //=> 'hello world'
    });
  }
}
```

--------------------------------

### Configure provideTranslateHttpLoader with default and custom paths

Source: https://ngx-translate.org/getting-started/translation-files

Shows the default configuration that loads from '/assets/i18n/' with '.json' suffix, and a custom configuration using './i18n/' prefix and '.json' suffix.

```typescript
// Default configuration loads from "/assets/i18n/" with ".json" suffix
provideTranslateHttpLoader()


// Custom configuration for different paths
provideTranslateHttpLoader({
    prefix: './i18n/',
    suffix: '.json'
})
```

--------------------------------

### Pre-load a language before using instant() with an explicit lang

Source: https://ngx-translate.org/recipes/per-call-language

Shows three options to pre-load translations before calling instant() with an explicit lang. Option A uses use() to load and switch the active language. Option B uses reloadLang() to load without switching. Option C seeds translations manually with setTranslation(). Without pre-loading, instant() returns the key and logs a one-shot console.warn per unloaded lang.

```typescript
// Option A: load and switch the active language
await firstValueFrom(this.translate.use("de"));
const text = this.translate.instant("greeting", undefined, "de"); // safe


// Option B: load without switching the active language
await firstValueFrom(this.translate.reloadLang("de"));
const text = this.translate.instant("greeting", undefined, "de"); // safe


// Option C: seed translations manually (no loader call)
this.translate.setTranslation("de", { greeting: "Hallo" });
const text = this.translate.instant("greeting", undefined, "de"); // safe
```

--------------------------------

### get method signature

Source: https://ngx-translate.org/reference/translate-service-api

Signature of the get method. Retrieves translations for a key or array of keys, with optional interpolation parameters and a per-call language (new in v18).

```typescript
get(
  key: string | string[],
  interpolateParams?: InterpolationParameters,
  lang?: Language,
): Observable<Translation>
```

--------------------------------

### instant(key, params, lang)

Source: https://ngx-translate.org/recipes/per-call-language

Returns the translation for the given key in the specified language, bypassing the current and fallback languages. If the language is not loaded, it returns the key and logs a warning.

```APIDOC
## instant(key, params, lang)

### Description
Returns the translation for the given key in the specified language, bypassing the current and fallback languages. If the language is not loaded, it returns the key and logs a warning.

### Method
instant

### Parameters
- **key** (string) - Required - The translation key.
- **params** (object) - Optional - Interpolation parameters.
- **lang** (string) - Optional - The language code to use for this call.

### Example
```typescript
this.translate.instant("brand.tagline", undefined, "en");
```

### Response
Returns the translated string for the specified language.
```

--------------------------------

### translate() usage examples

Source: https://ngx-translate.org/reference/translate-service-api

Examples of using translate() with plain values, arrays, arrow functions, and signals. The standalone translate() function can be used in component field initializers.

```typescript
greeting = this.translate.translate('HELLO');
labels   = this.translate.translate(['SAVE', 'CANCEL']);
dynamic  = this.translate.translate(() => this.model().currentKey);
fromSig  = this.translate.translate(this.keySignal, this.paramsSignal);
```

--------------------------------

### Language file with placeholder

Source: https://ngx-translate.org/getting-started/translating-your-components

Use {{name}} as a placeholder in the language file. The placeholder is replaced with the parameter value.

```json
{
    "app.hello": "Hello {{name}}!"
}
```

--------------------------------

### setCompiledTranslation usage example

Source: https://ngx-translate.org/reference/translate-service-api

Example of storing precompiled translations and later merging feature-specific compiled translations. The shouldMerge parameter defaults to false, so pass true to deep-merge.

```typescript
import precompiled from './precompiled-en';


translate.setCompiledTranslation('en', precompiled);
// later, merge feature-specific compiled translations:
translate.setCompiledTranslation('en', featurePrecompiled, true);
```

--------------------------------

### Side-by-side: pipe vs *translateBlock

Source: https://ngx-translate.org/getting-started/translating-your-components

The same UI written two ways: with the pipe and with *translateBlock. Both produce identical output and reactivity. Choose *translateBlock when you have more than ~2 keys in one place or when most translation calls share parameters.

```html
<div class="card">
  <h1>{{ 'card.title' | translate }}</h1>
  <p>{{ 'card.body' | translate:{ name: user.name } }}</p>
  <button>{{ 'common.save' | translate }}</button>
  <button>{{ 'common.cancel' | translate }}</button>
</div>
```

```html
<ng-container *translateBlock="let t">
  <div class="card">
    <h1>{{ t('card.title') }}</h1>
    <p>{{ t('card.body', { name: user.name }) }}</p>
    <button>{{ t('common.save') }}</button>
    <button>{{ t('common.cancel') }}</button>
  </div>
</ng-container>
```

--------------------------------

### provideTranslateService and provideChildTranslateService configuration

Source: https://ngx-translate.org/20-reference/90-release-notes

Shows how to configure a root translate service in bootstrapApplication or app config, and a child service with its own loader for a lazy route or component. Child services have isolated stores but inherit from parent.

```typescript
// Root — in bootstrapApplication() or app config
providers: [
    provideTranslateService({
        loader: provideTranslateHttpLoader(),
    }),
]

```

```typescript
// Lazy route or component — child service with its own translations
providers: [
    provideChildTranslateService({
        loader: provideTranslateHttpLoader({ prefix: "/assets/i18n/feature/" }),
    }),
]

```

--------------------------------

### Read fallbackLang signal

Source: https://ngx-translate.org/reference/translate-service-api

Reads the fallbackLang signal to get the current fallback language.

```typescript
const fallback = translate.fallbackLang();
```

--------------------------------

### provideTranslateService with provider helpers

Source: https://ngx-translate.org/reference/configuration

Shows how to configure the translate service with provider helpers using class or factory forms.

```APIDOC
## provideTranslateService

### Description
Configures the translate service with custom loaders, compilers, parsers, and missing translation handlers. The helpers accept either a class or a factory function.

### Method
N/A (Angular provider configuration)

### Parameters
#### Configuration Object
- **loader** (TranslateLoader) - Required - The loader to use. Can be provided via `provideTranslateLoader`.
- **compiler** (TranslateCompiler) - Optional - The compiler to use. Can be provided via `provideTranslateCompiler`.
- **parser** (TranslateParser) - Optional - The parser to use. Can be provided via `provideTranslateParser`.
- **missingTranslationHandler** (MissingTranslationHandler) - Optional - The handler for missing translations. Can be provided via `provideMissingTranslationHandler`.

### Request Example
```typescript
provideTranslateService({
  loader: provideTranslateLoader(MyTranslateLoader),
  compiler: provideTranslateCompiler(MyCompiler),
  parser: provideTranslateParser(MyParser),
  missingTranslationHandler: provideMissingTranslationHandler(MyHandler),
})
```

### Response
No response. This is a configuration function.

```

--------------------------------

### Subscribe to onTranslationRefresh

Source: https://ngx-translate.org/reference/translate-service-api

Example of subscribing to the onTranslationRefresh observable to re-render or re-fetch something that depends on translated text.

```typescript
translate.onTranslationRefresh.subscribe(() => {
  // re-render or re-fetch something that depends on translated text
});
```

--------------------------------

### Hierarchy diagram: root and child services

Source: https://ngx-translate.org/reference/concepts

ASCII diagram showing the parent-chain model: the root provideTranslateService() creates the application root, provideChildTranslateService() attaches a connected child that delegates language state and walks up the parent chain, and a nested provideTranslateService() creates an isolated subtree root that does not fall back to the outer root.

```text
Root injector
  └─ provideTranslateService()      ← root TranslateService + root store
       │
       ├─ /feature
       │    └─ provideChildTranslateService()
       │         ↑ parent chain: keys resolve child-first, then root
       │
       └─ /other
            └─ provideTranslateService()
                 ↑ isolated subtree root: does NOT fall back to outer root,
                   own language state and store
```

--------------------------------

### Read isLoading signal

Source: https://ngx-translate.org/reference/translate-service-api

Reads the isLoading signal to get a boolean indicating whether a language load is in progress.

```typescript
const busy: boolean = translate.isLoading();
```

--------------------------------

### With interpolation parameters

Source: https://ngx-translate.org/getting-started/translating-your-components

Recipe for passing interpolation parameters to multiple translation keys within a *translateBlock block.

```html
<ng-container *translateBlock="let t">
  <p>{{ t('greeting', { name: user.name }) }}</p>
  <p>{{ t('items.count', { count: items.length }) }}</p>
</ng-container>
```

--------------------------------

### Component: languages array

Source: https://ngx-translate.org/getting-started/translating-your-components

Defines the array of language codes used in the dynamic key example. The array is a member of the component.

```typescript
languages = ['en', 'fr', 'de'];
```

--------------------------------

### Multi-resource HTTP loader configuration

Source: https://ngx-translate.org/reference/configuration

Pass a resources array to load and deep-merge several sources per language. Each entry can be a bare prefix string or a { prefix, suffix } object. All resources are fetched in parallel and deep-merged in order; later entries overwrite earlier on key collisions.

```typescript
provideTranslateHttpLoader({
  resources: [
    '/assets/i18n/common/',                                // shared dictionary
    { prefix: '/assets/i18n/feature/', suffix: '.json' },  // feature overrides
  ],
})
```

--------------------------------

### use(lang)

Source: https://ngx-translate.org/recipes/per-call-language

Loads and switches the active language to the specified language. Returns an observable that completes when the language is loaded.

```APIDOC
## use(lang)

### Description
Loads and switches the active language to the specified language. Returns an observable that completes when the language is loaded.

### Method
use

### Parameters
- **lang** (string) - Required - The language code to load and set as active.

### Example
```typescript
await firstValueFrom(this.translate.use("de"));
```

### Response
An Observable that completes when the language is loaded.
```

--------------------------------

### Single-source HTTP loader configuration

Source: https://ngx-translate.org/reference/configuration

Configures the HTTP loader with a prefix and suffix. The final URL is `${prefix}${lang}${suffix}`. Defaults: prefix '/assets/i18n/', suffix '.json', enforceLoading false, useHttpBackend false.

```typescript
import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';


provideTranslateService({
  loader: provideTranslateHttpLoader({
    prefix: '/assets/i18n/',
    suffix: '.json',
    enforceLoading: false,
    useHttpBackend: false,
  }),
})
```

--------------------------------

### Registering a Custom Parser

Source: https://ngx-translate.org/reference/translate-parser-api

Shows how to provide a custom parser using provideTranslateParser() in the Angular application config.

```APIDOC
## Registering a Custom Parser

### Description
Use `provideTranslateParser()` to register a custom parser with the translation service.

### Usage
```typescript
import { provideTranslateService, provideTranslateParser } from '@ngx-translate/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideTranslateService({
      parser: provideTranslateParser(MyParser),
    }),
  ],
};
```

### Factory form
```typescript
provideTranslateService({
  parser: provideTranslateParser(() => new MyParser({ strict: true })),
})
```

### Notes
- The factory form is useful when the parser needs configuration from `inject()`.
```

--------------------------------

### Use getRoot to set translation globally

Source: https://ngx-translate.org/reference/translate-service-api

Example of using getRoot() to write a translation globally from a child component. The root service returns itself.

```typescript
// Write a translation globally from a child component.
const root = inject(TranslateService).getRoot();
root.set('GLOBAL.MESSAGE', 'Hallo Welt!', 'de');
```

--------------------------------

### Application configuration with provideMissingTranslationHandler

Source: https://ngx-translate.org/recipes/fix-translation-loading-glitches

Configures the Angular application to use the EmptyMissingTranslationHandler via provideTranslateService and provideMissingTranslationHandler. This setup is required for the handler to take effect.

```TypeScript
import { ApplicationConfig } from '@angular/core';
import { provideTranslateService, provideMissingTranslationHandler } from '@ngx-translate/core';
import { provideHttpClient } from '@angular/common/http';
import { EmptyMissingTranslationHandler } from './empty-missing-translation-handler';


export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    provideTranslateService({
      fallbackLang: 'en',
      missingTranslationHandler:
        provideMissingTranslationHandler(EmptyMissingTranslationHandler)
    })
  ],
};

```

--------------------------------

### Rollback to v17 with npm install

Source: https://ngx-translate.org/20-reference/90-release-notes

Command to downgrade ngx-translate to v17 if v18 is not suitable. The v17 line accepts critical fixes against the v17 branch.

```bash
npm install @ngx-translate/core@17 @ngx-translate/http-loader@17
```

--------------------------------

### Pre-load translations via APP_INITIALIZER

Source: https://ngx-translate.org/recipes/ssr-and-prerender

Use this pattern to avoid double-fetching translation files during SSR. It bundles translations as JSON and calls setTranslation() in an APP_INITIALIZER, so the HTTP loader is never invoked for pre-loaded languages. Requires importing enTranslations from a JSON file and providing the TranslateService.

```typescript
import { APP_INITIALIZER, ApplicationConfig, inject } from "@angular/core";
import { provideTranslateService, TranslateService } from "@ngx-translate/core";
import enTranslations from "../public/i18n/en.json";


export const appConfig: ApplicationConfig = {
    providers: [
        provideTranslateService({ fallbackLang: "en" }),
        {
            provide: APP_INITIALIZER,
            multi: true,
            useFactory: () => {
                const translate = inject(TranslateService);
                return () => {
                    translate.setTranslation("en", enTranslations);
                    return translate.use("en");
                };
            },
        },
    ],
};

```

--------------------------------

### Service Method: service.stream('KEY')

Source: https://ngx-translate.org/reference/concepts

Returns a live Observable<Translation> that re-emits on language or translation changes.

```APIDOC
## Service Method: service.stream('KEY')

### Description
Returns a live Observable<Translation> that re-emits on language or translation changes.

### Usage
Use for reactive translations that update when the language or translations change.

### Parameters
- **KEY** (string) - Required - The translation key.

### Returns
- `Observable<Translation>` - An observable that emits the translation and continues to emit on changes.

### Example
```typescript
service.stream('HELLO').subscribe(translation => console.log(translation));
```
```

--------------------------------

### Service Method: service.get('KEY')

Source: https://ngx-translate.org/reference/concepts

Returns an Observable<Translation> that completes once with the translation value.

```APIDOC
## Service Method: service.get('KEY')

### Description
Returns an Observable<Translation> that completes once with the translation value.

### Usage
Use for one-shot observable reads.

### Parameters
- **KEY** (string) - Required - The translation key.

### Returns
- `Observable<Translation>` - An observable that emits the translation and completes.

### Example
```typescript
service.get('HELLO').subscribe(translation => console.log(translation));
```
```

--------------------------------

### Build pipeline: input and output

Source: https://ngx-translate.org/recipes/precompile-translations

The build step's job is to turn the raw JSON translation format into a compiled object with interpolation functions. The exact tooling depends on your stack (Node script, Angular plugin, Vite transformer).

```json
{ "greeting": "Hello {{name}}" }
```

```javascript
{ greeting: (params) => `Hello ${params["name"]}` }
```

--------------------------------

### Compiled translation with InterpolateFunction

Source: https://ngx-translate.org/reference/translate-compiler-api

Example of a compiled translation object where values are InterpolateFunction. The default TranslateParser calls such functions with interpolation parameters and expects a string return.

```typescript
const compiledTranslations = {
  hello: (params: any) => `Hello ${params.name}!`,
};

```

--------------------------------

### Component: role variable

Source: https://ngx-translate.org/getting-started/translating-your-components

Defines the role variable used in the dynamic key example. The value is uppercase, but the lowercase pipe converts it to lowercase for the translation key.

```typescript
role = 'ADMIN';
```

--------------------------------

### Factory function support for all plugin providers

Source: https://ngx-translate.org/20-reference/90-release-notes

Shows how to use factory functions with provideTranslateLoader(), provideTranslateCompiler(), provideTranslateParser(), and provideMissingTranslationHandler(). The existing class-based usage continues to work unchanged.

```typescript
provideTranslateLoader(() => new MyLoader(someConfig))
provideTranslateCompiler(() => new MyCompiler())
provideTranslateParser(() => new MyParser())
provideMissingTranslationHandler(() => new MyHandler(someConfig))
```

--------------------------------

### Empty key handling (v17) - Old Code

Source: https://ngx-translate.org/getting-started/migration-guide

In v17, instant('') threw an error, so try/catch was used to handle empty keys. In v18, it returns an empty string.

```typescript
try {
    const value = translate.instant(key);
} catch {
    // handle empty key
}
```

--------------------------------

### Use currentLang() signal in computed and effect

Source: https://ngx-translate.org/getting-started/translating-your-components

currentLang() is a signal that can be used in computed() and effect() to react to language changes. The example shows deriving a boolean and logging language switches.

```TypeScript
import { Component, computed, effect, inject } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';


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


  // Derive a value from the current language
  isGerman = computed(() => this.translate.currentLang() === 'de');


  constructor() {
    // React to language changes
    effect(() => {
      console.log('Language switched to', this.translate.currentLang());
    });
  }
}
```
Tokens:
Raw