Translate Directive
Overview
Use the translate directive in your HTML templates to retrieve translations from the singleton service.
@Directive({ selector: '[l10n]' })
class L10nDirective implements AfterViewInit {
l10n: string;
source: string;
params: string[];
constructor(el: ElementRef, ...)
ngAfterViewInit()
}
Selector
[l10n]
Inputs
| Attribute | Type | Required | Description |
|---|---|---|---|
| key | String | Required | Bound to L10nDirective.l10n. Define the key to identify the translation, it should name like this: component_module_page_control_shortmsg. e.g. web_settings_stats_statsTable_host; |
| source | String | No | Bound to L10nDirective.source. English string as default value, API will return it when there’s no translation found either from cache or remote singleton server. If source is null, will looking for source string from sourceBundle. |
| params | Array[] | No | Bound to L10nDirective.params. Parameter array, it’s used to format the translation/source when they contain placeholders. |
Example Code
// Translate directive with source from sourceBundle, so there is no source in template
<span l10n='singleton.description' [params]="['Singleton for Angular client']" ></span>
// Deprecated: Simple translate directive use
<span l10n='some.unique.key' source='English for some.unique.key'></span>
// Deprecated: Translate directive with substitution
<span l10n='some.unique.key' source='English for some.unique.key with substitution {0}' [params]="['someTemplateVariable']"></span>