Skip to main content
Version: 5.x.x

API (Angular)

The package @tolgee/ngx exports these components and all of @tolgee/web.


The Tolgee Module. Add it to imports. The module exports TranslatePipe and TComponent.

Example usage:

imports: [
providers: [


The injection token to provide Tolgee instance.

imports: [
providers: [
useFactory: () => {
return Tolgee()
staticData: {
en: () => import('../i18n/en.json'),
cs: () => import('../i18n/cs.json'),
apiUrl: environment.tolgeeApiUrl,
apiKey: environment.tolgeeApiKey,
fallbackLanguage: 'en',
defaultLanguage: 'en',


Contains methods to translate text used by other components.

property tolgee

The Tolgee instance.

method translate

Returns Observable emitting current translation for specified parameters and current language. When the current value changes due to any event (e.g. language change), the new value is emitted.

this.subscription = this.translateService
.translate('this_is_a_key_with_params', { key: 'value' }, 'Default value')
.subscribe((val) => (this.translated = val));

This method accepts the same arguments as Tolgee.t.

translate(key: string, defaultValue?: string, options?: CombinedOptions): Observable<string>
translate(key: string, options?: CombinedOptions): Observable<string>
translate(props: TranslateProps): Observable<string>

method instant

Returns string providing current translation value depending on the current language.

const translated = this.translateService
.instant('this_is_a_key_with_params', { key: 'value' }, 'Default value')

This method accepts the same arguments as Tolgee.t.

instant(key: string, defaultValue?: string, options?: CombinedOptions): string
instant(key: string, options?: CombinedOptions): string
instant(props: TranslateProps): string

property language

Returns string containing current language.

this.translateService.language // "en"

property languageAsync

Returns Observable<string> emitting current language. When language is changed and loaded, the new value is emitted.

method changeLanguage

Sets current language.


parameter language

The language to be set.

returns Promise<void> relved when language data is loaded

Method on

Listens to Tolgee events.

parameter event

The event to listen to

returns Observable<?> emitting when the event is triggered, providing event-specific data.

Read more in Events API

method start

Runs the method from the @tolgee/core library outside Angular's NgZone.


Component with t attribute selector. Replaces the content of the element with the translated value.

  • Input key - Key to translate
  • Input ns - The namespace of the key
  • Input params - Object of parameters to interpolate
  • Input default - Default value
  • Input isHtml - Whether the input should be treated as HTML.
  • Input noWrap - Disable wrapping
  • Input language - Override current Tolgee language. This way you can switch to different language for separate translation. Load the language manually with tolgee.loadRecord.
[params]="{key: 'value', key2: 'value2'}"

translate pipe

Translates a key with specific parameters or default value. The transform method of translate pipe accepts the same arguments as tolgee.t

Example usages:

{{ 'this_key_does_not_exist' | translate:'This is default'}}
{{ 'this_is_a_key_with_params' | translate:{key: 'value', key2: 'value2'} }}
{{ 'this_is_a_key_with_params' | translate:"Default value":{key: 'value', key2: 'value2'} }}
{{ { key: 'this_is_a_key', defaultValue: 'Jeeey!' } | translate}}


A resolver to load namespaces while loading lazy module. You need to set data.tolgeeNamespace property to set the namespace to load.