I18n

Localize your website

Zeta provides many things to help you localize your website. The central service behind all the internationalization (i18n) is the I18nService, which you can feed with your translations via setTranslations(). Which i18n-method to choose depends on where your text occurs.

Element's text content

Use the xc-i18n directive.

<h1 xc-i18n>main-title</h1>

Element's attribute

Use the xcI18n pipe.

<xc-button (click)="doSth()" xc-tooltip="{{'do-sth-tooltip' | xcI18n}}" xc-i18n>do-sth</xc-button>

TypeScript

Use the I18nService directly.

i18n.translate('modeller.workflow.exception');

Xc-components

All the xc-components (like xc-form-input or xc-button) already have a special handling to localize their attributes. For example, the label-attribute of the xc-form-input will be localized automatically as long as you set a xc-i18n-attribute.

Release

To localize your releases, you have two options:

1. Create one build per language
2. Compile all languages into one build

With the SelectableLanguage-interface, you can decide for one of these options.

If you settle for the second one, you have to subscribe to LocaleService::languageChange and force your UI to redraw to be able to switch the site's language at runtime.

Example

As an example see how it's done in the xyna-modeller.