Page History

...

To allow for easier identification of relevant strings the identifiers are provided in the following format

type.kebab-case-text

For example

<button>example text</button>
<!-- would become -->
<button translate="action.example-text">example text</button>

Where type is one of the provided types listed in the types section

type and text are separated by two dashes.

text is the text content, dash separated words, all lower case, with punctuation removed.

Types

The following types are provided:

• action buttons or links that cause a state change within the app
• label label for an input or a section
• message messages that warn a user of exceptions in interactions, i.e. validation messages
• value text for displaying values such as true or false
• branding.* this special type is used to denote the customizable values located in the ui > brand.ts file

Localize Text Only

<!-- BAD -->
<!-- this will pull both the text AND the icon into the translation -->
<button i18n="action.some-text">
  some text
  <i class="fa fa-icon"></i>
</span>

<!-- GOOD -->
<!-- this will only localize the text -->
<!-- NOTE: ng-container does not create any new dom on the page -->
<button>
  <translate key="action.some-text">some text</ng-container>
  <i class="fa fa-icon"></i>
</button>

Updating Text

When updating text, update the identifier to match the new text field.

<!-- BAD -->
<!-- identifier does not match text after update -->
<label translate="label.name">Address</label>

<!-- GOOD -->
<!-- identifier and text match -->
<label translate="label.address">Address</label>