class I18nService abstract

extends ManagedService

Abstract base class definition for a ManagedService that provides internationalization features.

To implement i18n in an application, extend this class and register an instance for the current locale before rendering the UI. Alternatively, use UIRenderContext.emitRenderChange after registering a new service to update the UI. In the application’s implementation of the I18nService class, the methods tt and and getNonTranslatable must be defined.

Note: The service name must remain "Core.I18n" (default, assigned by this base class) for global functions such as ‘tt’ to work.

See Also

tt, tl, Binding.addFilter (includes ‘tt’ filter)


The following example is a minimal implementation of an I18n service:

export class NL_I18nService extends I18nService {
  locale = "nl-NL";

  /** Translate and/or format given value */
  tt(value: any, type: string) {
    switch (type) {
      case "translate":
        // ... (translate string using lookup table)
        // or add to non-translatable list
        this._nonTranslatable[value] = "";
        return value;
      case "datetime"
        // ... (format Date value somehow)
        return "...";
    return value;

  /** Get list of non-translatable strings */
  getNonTranslatable() {
    return this._nonTranslatable;

  private _nonTranslatable: any = {};

To activate the locale for the service defined above, the application would need to register an instance of this service (as "Core.I18n"). In a real-world application the available services would probably be stored in a list, but you can also create them manually:

let i18n = new NL_I18nService();


(name?: string): I18nService



The name of this service, set only once by the service constructor. The preferred format for service names is Namespace.CamelCaseName.

.locale abstract


Locale identifier (e.g. en-US).

.tt() abstract

(value: any, type: string): string

Translate and/or format given value, based on given type string (defaults to ‘translate’ for strings passed to the tt function, or ‘datetime’ for Date values).

Note: Use the tt function instead where possible, which also removes ***{...}*** tags which can be used for unique string identifiers or comments to translators. This method should not need to remove those tags by itself.

.getNonTranslatable() abstract

(): { [text: string]: any; }

Returns an object with property names set to strings that should have been translated, but for which a translation was not available (abstract).


(n: any, forms: string[]): string

Pick one of the given plural forms, based on given number (or given array/ManagedList length). Can be overridden for languages that require more advanced logic.

The default implementation chooses the first form for n >= 1 && n < 2 || n <= -1 && n > -2 and the second form otherwise (i.e. options are 1 or 0/many). If more than two forms are given, this implementation chooses the form based on Math.floor(Math.abs(n)) (i.e. options are 0, 1, 2, …, many).


(): void

Inherited from ManagedService.register.



Inherited from ManagedObject.managedId.



Inherited from ManagedObject.managedState.

.getReferenceCount() protected

(): number

Inherited from ManagedObject.getReferenceCount.

.getManagedReferrers() protected

(): ManagedObject[]

Inherited from ManagedObject.getManagedReferrers.

.getManagedParent() protected

[1]. (): ManagedObject
[2]. <TParent extends ManagedObject>(ParentClass: ManagedObjectConstructor<TParent>): TParent

Inherited from ManagedObject.getManagedParent.


<TEvent extends ManagedEvent = ManagedEvent, TConstructorArgs extends any[] = any[]>(e: string | TEvent | (new (...args: TConstructorArgs) => TEvent), ...constructorArgs: TConstructorArgs): this

Inherited from ManagedObject.emit.

.propagateChildEvents() protected

[1]. (f?: (this: this, e: ManagedEvent, propertyName: string) => void | ManagedEvent | ManagedEvent[]): this
[2]. (...types: (ManagedEvent | (new (...args: any[]) => ManagedEvent))[]): this

Inherited from ManagedObject.propagateChildEvents.

.activateManagedAsync() protected

(): Promise<any>

Inherited from ManagedObject.activateManagedAsync.

.deactivateManagedAsync() protected

(): Promise<void>

Inherited from ManagedObject.deactivateManagedAsync.

.destroyManagedAsync() protected

(): Promise<void>

Inherited from ManagedObject.destroyManagedAsync.

.onManagedStateActivatingAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateActivatingAsync.

.onManagedStateActiveAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateActiveAsync.

.onManagedStateDeactivatingAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateDeactivatingAsync.

.onManagedStateInactiveAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateInactiveAsync.

.onManagedStateDestroyingAsync() protected

(): Promise<void>

Inherited from ManagedObject.onManagedStateDestroyingAsync.