Translating

You can implement translation in your Angular application in the following ways.

• Using the translate pipe
• Using the t attribute
• Using the translation methods

Translate pipe

You can translate a string using the translate pipe. TranslatePipe is standalone, so import it in the component where you use it.

import { Component } from '@angular/core';
import { TranslatePipe } from '@tolgee/ngx';

@Component({
  template: `<h1>{{ 'hello_world' | translate }}</h1>`,
  imports: [TranslatePipe],
})
export class AppComponent {}

The pipe accepts translation parameters and an optional default value.

<h1>{{ 'hello_world' | translate }}</h1>

To provide parameters for translation, pass them as the second argument.

info

To enable parameter interpolation, you need to use a message formatter.

<h1>{{ 'hello' | translate:{ name: 'John Doe' } }}</h1>

You can also provide a default value. When you need both a default value and params, pass the default value first and the params second.

<h1>{{ 'hello' | translate : 'Default!' }}</h1>
<h1>{{ 'hello' | translate : 'Default!' : { name: 'John Doe' } }}</h1>

To disable wrapping, provide a noWrap option.

<h1>{{ 'hello' | translate:{ noWrap: true } }}</h1>

t attribute

You can also translate an element with the t attribute. TDirective is standalone, so import it in the component where you use it.

import { Component } from '@angular/core';
import { TDirective } from '@tolgee/ngx';

@Component({
  template: `<h1 t key="providing_default_values"></h1>`,
  imports: [TDirective],
})
export class AppComponent {}

<h1 t key="providing_default_values"></h1>

To provide parameters for translation, pass them via the params attribute.

info

To enable parameter interpolation, you need to use a message formatter.

<p t key="using_t_with_params" [params]="{ name: 'John Doe' }"></p>

You can also provide a default value using the default attribute.

<p t key="using_t_with_default" default="This is default"></p>

Translation methods

To translate texts in your component code, inject TranslateService and use the translate or instant methods.

translate returns an Observable. In Angular 20, a convenient pattern is converting it to a signal with toSignal.

import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { TranslateService } from '@tolgee/ngx';

@Component({
  template: `<h1>{{ helloWorld() }}</h1>`,
})
export class AppComponent {
  private readonly translateService = inject(TranslateService);

  readonly helloWorld = toSignal(
    this.translateService.translate('hello_world'),
    {
      initialValue: '',
    }
  );
}

If you prefer working with observables directly, subscribe to the result.

this.translateService
  .translate('hello_world')
  .subscribe((translatedValue) => (/* use the translatedValue */));

If you are unable to use this asynchronous approach for any reason, you can use the instant method.

warning

Don't overuse the instant method. Whenever possible, use the translate method. When translations are not loaded, instant method will not provide a valid result.

this.helloWorld = this.translateService.instant('hello_world');

Both the instant and translate methods accept the same parameters as tolgee.t.

tip

You can also check the Angular example application to learn more.