Localization

The <q2-loc> component can be used to add translated text to various parts of your application. The value attribute accepts a key from your translation dictionary, and will render the translated value at runtime. Alternatively, you can pass the translation key as text in the element to the same effect.

// In translation dictionary

translations: {
  "styleGuide.components.q2Loc.greetingExample": "Hello there!"
}

// In HTML

<q2-loc value="styleGuide.components.q2Loc.greetingExample"></q2-loc>

// Alternate:

<q2-loc>styleGuide.components.q2Loc.greetingExample</q2-loc>

This will render the value of the provided key as text (e.g. "Hello there!").

In addition to passing a localization key to the value attribute , you can also dynamically set the substitutions property as an array of strings.

// In translation dictionary

translations: {
  "styleGuide.components.q2Loc.greetingExample": "Hello, {0} {1}, welcome to {2}"
}

// In JS file or script tag

locElement.value = "styleGuide.components.q2Loc.greetingExample";
locElement.substitutions = ["Jane", "Doe", "Earth"];

This will render combined text using the provided substitutions (e.g., "Hello, Jane Doe, welcome to Earth!").