API (Angular)
The package @tolgee/ngx
exports these components and all of @tolgee/web
.
NgxTolgeeModule
The Tolgee Module. Add it to imports. The module exports TranslatePipe
and TComponent
.
Example usage:
@NgModule({
imports: [
NgxTolgeeModule,
...
],
providers: [
{
provide: TOLGEE_INSTANCE,
...
},
],
...
})
TOLGEE_INSTANCE
The injection token to provide Tolgee instance.
@NgModule({
imports: [
NgxTolgeeModule,
...
],
providers: [
{
provide: TOLGEE_INSTANCE,
useFactory: () => {
return Tolgee()
.use(LanguageDetector())
.use(FormatIcu())
.use(DevTools())
.init({
staticData: {
en: () => import('../i18n/en.json'),
cs: () => import('../i18n/cs.json'),
},
apiUrl: environment.tolgeeApiUrl,
apiKey: environment.tolgeeApiKey,
fallbackLanguage: 'en',
defaultLanguage: 'en',
});
},
},
],
...
})
TranslateService
Contains methods to translate text used by other components.
property tolgee
The Tolgee instance.
method translate
Returns Observable
emitting current translation for specified parameters and current language. When the current value changes
due to any event (e.g. language change), the new value is emitted.
this.subscription = this.translateService
.translate('this_is_a_key_with_params', { key: 'value' }, 'Default value')
.subscribe((val) => (this.translated = val));
This method accepts the same arguments as Tolgee.t
.
translate(key: string, defaultValue?: string, options?: CombinedOptions): Observable<string>
translate(key: string, options?: CombinedOptions): Observable<string>
translate(props: TranslateProps): Observable<string>
method instant
Returns string
providing current translation value depending on the current language.
const translated = this.translateService
.instant('this_is_a_key_with_params', { key: 'value' }, 'Default value')
This method accepts the same arguments as Tolgee.t
.
instant(key: string, defaultValue?: string, options?: CombinedOptions): string
instant(key: string, options?: CombinedOptions): string
instant(props: TranslateProps): string
property language
Returns string
containing current language.
this.translateService.language // "en"
property languageAsync
Returns Observable<string>
emitting current language. When language is changed and loaded, the new value is emitted.
method changeLanguage
Sets current language.
this.translateService.setLang('en');
parameter language
The language to be set.
returns Promise<void>
relved when language data is loaded
Method on
Listens to Tolgee events.
parameter event
The event to listen to
returns Observable<?>
emitting when the event is triggered, providing event-specific data.
Read more in Events API
method start
Runs the Tolgee.run
method from the @tolgee/core
library outside Angular's NgZone.
TComponent
Component with t
attribute selector. Replaces the content of the element with the translated value.
- Input
key
- Key to translate - Input
ns
- The namespace of the key - Input
params
- Object of parameters to interpolate - Input
default
- Default value - Input
isHtml
- Whether the input should be treated as HTML. - Input
noWrap
- Disable wrapping - Input
language
- Override current Tolgee language. This way you can switch to different language for separate translation. Load the language manually withtolgee.loadRecord
.
<div
t
key="this_is_a_key_with_params"
[params]="{key: 'value', key2: 'value2'}"
></div>
translate
pipe
Translates a key with specific parameters or default value. The transform method of translate
pipe accepts the
same arguments as tolgee.t
Example usages:
{{ 'this_key_does_not_exist' | translate:'This is default'}}
{{ 'this_is_a_key_with_params' | translate:{key: 'value', key2: 'value2'} }}
{{ 'this_is_a_key_with_params' | translate:"Default value":{key: 'value', key2: 'value2'} }}
{{ { key: 'this_is_a_key', defaultValue: 'Jeeey!' } | translate}}
NamespaceResolver
A resolver to load namespaces while loading lazy module. You need to set data.tolgeeNamespace
property to set the namespace to load.