Widget translations

Widget translate pipe

The template code shown uses the widgetTranslate pipe to show translations from the specifications. To use this, first import WidgetTranslatePipeModule from @valtimo/dashboard and add it to the imports array of a module. Now, the widgetTranslate pipe can be used in templates. It uses the following syntax for data sources:

sample-translation-pipe.component.html

<span>
    {{ 'translationKey' | widgetTranslate: dataSourceKey | async" }}
</span>

And for display types:

sample-translation-pipe.component.html

<span>
    {{ 'translationKey' | widgetTranslate: displayTypeKey | async" }}
</span>

The pipe returns an observable, so do not forget to add | async at the end.

translationKey refers to one of the translation keys specified in a data source or display type specification.

displayTypeKey and dataSourceKey are provided as inputs on configuration components by default.

Widget translation service

If translation is to take place inside the component (as opposed to inside the template using the pipe), the WidgetTranslationService may be used, which is exported by @valtimo/dashboard. It supports a translate method, which returns an observable containing the translation, and an instant method, which returns a string containing the translation.