Utilizing dynamic translation ID with Angular's $localize feature

Question

Utilizing dynamic translation ID with Angular's $localize feature

Angular 9 introduces a new feature with @angular/localize that allows code translation directly from typescript. While the official documentation is lacking, I discovered some helpful tips in this post.

$localize`:@@my-trans-unit-id:` // This method works

This approach functions correctly when the ID is statically passed to the function. However, when attempting to pass a dynamic ID (using a variable), the translation fails and the ID is not parsed or translated.

I attempted to pass the variable like this:

const id = "my-trans-unit-id";

$localize`:@@${id}:`; // This does not work
$localize`:@@`+id+`:`; // This does not work either

angular typescript localization angular9

Answer 1

Answer №1

In Angular, there is no built-in feature for generating dynamic translations as they are typically created during compile time.

To address this limitation, I devised a solution by creating custom pipes that can be called whenever a translation is required. Instead of relying on a single translation instruction, I utilize multiple $localize calls within a switch statement to retrieve the appropriate translation based on an ID.

Here is an example of a pipe for translating order statuses dynamically:

import { Pipe, PipeTransform } from '@angular/core';
import { OrderStatusEnum } from 'installation-status.enum';

@Pipe({
    name: 'orderStatusRenderer'
})
export class OrderStatusRendererPipe implements PipeTransform {
    constructor() {}

    transform(value: number, ...args: any[]): any {
        switch (value) {
            case OrderStatusEnum.PREPARING:
                return $localize`:@@order.status.preparing:`;
            case OrderStatusEnum.SHIPPED:
                return $localize`:@@order.status.shipped:`;
            case OrderStatusEnum.COMPLETED:
                return $localize`:@@order.status.completed:`;
        }
    }
}

Answer 2

In Angular, there is no built-in feature for generating dynamic translations as they are typically created during compile time.

To address this limitation, I devised a solution by creating custom pipes that can be called whenever a translation is required. Instead of relying on a single translation instruction, I utilize multiple $localize calls within a switch statement to retrieve the appropriate translation based on an ID.

Here is an example of a pipe for translating order statuses dynamically:

import { Pipe, PipeTransform } from '@angular/core';
import { OrderStatusEnum } from 'installation-status.enum';

@Pipe({
    name: 'orderStatusRenderer'
})
export class OrderStatusRendererPipe implements PipeTransform {
    constructor() {}

    transform(value: number, ...args: any[]): any {
        switch (value) {
            case OrderStatusEnum.PREPARING:
                return $localize`:@@order.status.preparing:`;
            case OrderStatusEnum.SHIPPED:
                return $localize`:@@order.status.shipped:`;
            case OrderStatusEnum.COMPLETED:
                return $localize`:@@order.status.completed:`;
        }
    }
}

Answer 3

Answer №2

It's amazing how this method works so well.

I stumbled upon this solution through a process of trial and error:

const localize = $localize;
const id = "my-trans-unit-id";
const translation = localize(<any>{ '0': `:@@${id}:${id}`, 'raw': [':'] });

Answer 4

It's amazing how this method works so well.

I stumbled upon this solution through a process of trial and error:

const localize = $localize;
const id = "my-trans-unit-id";
const translation = localize(<any>{ '0': `:@@${id}:${id}`, 'raw': [':'] });

Answer 5

Answer №3

If you want to customize the transformation of the trans-unit id, you can create your own function for tagged templates:

const transUnitId = '@@Messages.Greeting';
const name = 'Joe';
const message = $localizeId`${transUnitId}:TRANSUNITID:Hi ${name}:NAME:, translated with run-time created trans-unit id.`;
// Original
// message = Hi Joe, translated with run-time created trans-unit id.
// German
// message = Hallo Joe, übersetzt mit einer zur Laufzeit erstellten Trans-Unit-Id.

export function $localizeId(messageParts: TemplateStringsArray, ...expressions: any[]): string {
  // Create writeable copies
  const messagePartsCopy: any = [...messageParts];
  const messagePartsRawCopy = [...messageParts.raw];

  // Strip trans-unit-id element
  const prefix = messagePartsCopy.shift();
  const prefixRaw = messagePartsRawCopy.shift();
  const transUnitId = expressions.shift();

  // Re-add prefix and replace :TRANSUNITID: with transUnitId.
  messagePartsCopy[0] = prefix + messagePartsCopy[0].replace(':TRANSUNITID:', `:@@${transUnitId}:`);
  messagePartsRawCopy[0] = prefixRaw + messagePartsRawCopy[0].replace(':TRANSUNITID:', `:${transUnitId}:`);

  // Create messageParts object
  Object.defineProperty(messagePartsCopy, 'raw', {value: messagePartsRawCopy});

  // Call original localize function
  return $localize(messagePartsCopy as TemplateStringsArray, ...expressions);
}

Answer 6

If you want to customize the transformation of the trans-unit id, you can create your own function for tagged templates:

const transUnitId = '@@Messages.Greeting';
const name = 'Joe';
const message = $localizeId`${transUnitId}:TRANSUNITID:Hi ${name}:NAME:, translated with run-time created trans-unit id.`;
// Original
// message = Hi Joe, translated with run-time created trans-unit id.
// German
// message = Hallo Joe, übersetzt mit einer zur Laufzeit erstellten Trans-Unit-Id.

export function $localizeId(messageParts: TemplateStringsArray, ...expressions: any[]): string {
  // Create writeable copies
  const messagePartsCopy: any = [...messageParts];
  const messagePartsRawCopy = [...messageParts.raw];

  // Strip trans-unit-id element
  const prefix = messagePartsCopy.shift();
  const prefixRaw = messagePartsRawCopy.shift();
  const transUnitId = expressions.shift();

  // Re-add prefix and replace :TRANSUNITID: with transUnitId.
  messagePartsCopy[0] = prefix + messagePartsCopy[0].replace(':TRANSUNITID:', `:@@${transUnitId}:`);
  messagePartsRawCopy[0] = prefixRaw + messagePartsRawCopy[0].replace(':TRANSUNITID:', `:${transUnitId}:`);

  // Create messageParts object
  Object.defineProperty(messagePartsCopy, 'raw', {value: messagePartsRawCopy});

  // Call original localize function
  return $localize(messagePartsCopy as TemplateStringsArray, ...expressions);
}

Utilizing dynamic translation ID with Angular's $localize feature

Answer №1

Answer №2

Answer №3

Similar questions

Mapping JSON data from an array with multiple properties

io-ts: Defining mandatory and optional keys within an object using a literal union

The TypeError occurs when attempting to access the 'modelReplicationStartDate' property of an undefined entity

Encountering an issue saving files in Angular 2 when the npm server is active

The npm module appears to be installed but is not displaying

The absence of the 'profileStore' property is noticed in the '{}' type, which is necessary in the 'Readonly<AppProps>' type according to TypeScript error code ts(2741)

BS Modal was improperly invoked, leading to an illegal instantiation

Having trouble closing my toggle and experiencing issues with the transition not functioning properly

Transforming JavaScript to TypeScript in Angular: encountering error TS2683 stating that 'this' is implicitly of type 'any' due to lacking type annotation

When working with formControlName in Angular Material 2, the placeholder may overlap the entered value

Why is Karma not recognizing my typings definition file?

Tips for troubleshooting the error "Cannot locate module mp3 file or its associated type declarations"

Incorporating AngularFire2 in the latest Angular 11.0.5 framework

"Utilizing Angular's dynamic variable feature to apply ngClass dynamically

What are some solutions to the error message "Error: Cannot find any matching routes" that appears when trying to switch between tabs following a successful login?

A guide on integrating a vue-concurrency Task Creator with argument support

Having issues with the toggle display button functionality not working properly in Angular when using click()

Developing an object using class and generic features in Typescript

Adding extra fields to an existing JSON response in a TypeScript REST API

Troubleshooting Angular2 Error: Incompatibility with TypeScript - Unable to Assign String