@HostBinding('dir') rtl: 'rtl' | 'ltr';
@kthomas182 not that i know of. I haven't seen any directionality info in the languages or locales, but you can provide it with a map of languages to directionality. I did this, then created a directionality service that i can subscribe to, and bound the directionality to my host dir attribute:
@HostBinding('dir') rtl: 'rtl' | 'ltr';
Thanks @seadonk, I'll check into that
Hello, I am trying to create a very dynamic translation like so;
{{ 'scope.information.' + info_key | transloco: { form: form.value } }}
Where form is an object,
But when I try to access a subkey of the form I am returned with an empty string (I presume it's trying to find another translation key with the name):"scope.information.some_key": "translate {{form.name}}"
package.json file then it is not an npm package and therefor you don't require to use the scoped library extractor...see the main issue it resolves is that npm packages do not support
dynamic imports due to building problems which makes it hard to work with assets files, but in your case it seems like you don't need it since you don't have a separate building process to you library, so you may just work like it's the same app :)
1 reply
@jurienhamaker If I understand correctly, you are trying to access a subkey inside the translation string, that won't work for you, you need to pass the value you want to display:
{
"scope.information.some_key": "translate {{value}}"
} {{ 'scope.information.some_key' | transloco: { value: form.value.some_key } }}You can make it dynamic if the last part of your key is also the property name, you can also write a custom transpiler which handles objects as values.
1 reply
1 reply
I have a problem with scoped translations in the component itself. Here's my code:
module.ts
@NgModule({
providers: [{ provide: TRANSLOCO_SCOPE, useValue: 'articles' }],
[...]component.ts
[...]
constructor(translocoService: TranslocoService) {
this.sortItems = [
// TODO Translation does not seem to work with the scope here
{ id: 'number', label: translocoService.translate('articles.article.number') },
{ id: 'name', label: translocoService.translate('articles.article.name') },
{ id: 'updated_at', label: translocoService.translate('articles.article.updated-at') },
];
this.sortBy = this.sortItems[0];
}
[...]component.html
[...]
<div class="prose">
<h2 class="headline">{{ 'articles.headline' | transloco }}</h2>
<!-- No Problems with the scope there-->
<h3 class="headline">{{ 'articles.article.number' | transloco }}</h3>
</div>
<wb-twc-dropdown-select [items]="sortItems" (itemClick)="onSorterItemClick($event)" [active]="sortBy"></wb-twc-dropdown-select>
[...]No problem in the components template using the directives or pipes, but the service does not seems to be scoped in the component itself. Any obvious mistake by me?
1 reply
{
provide: TRANSLOCO_CONFIG,
useValue: translocoConfig({
availableLangs: ['en', 'de'],
fallbackLang: "en",
missingHandler: {
useFallbackTranslation: true
},
defaultLang: 'en',
failedRetries: 2,
// Remove this option if your application doesn't support changing language in runtime.
reRenderOnLangChange: true,
prodMode: environment.production,
})
},
detectChanges.it('should get overridden language translation with lang', async function() {
expect('.i18n').toHaveText('This is english.');
await new Promise(resolve => {
translocoService.events$.pipe(
filter((t: TranslocoEvents) => t.type === 'translationLoadSuccess')
).subscribe(t => resolve());
translocoService.setActiveLang('es');
}).then(() => spectator.detectChanges());
expect('.i18n').toHaveText('Esto es español.');
});
// var consoleData = check if translation is missing
expect(consoleData).not.toContain('missing translation ...');
});
@avifox spectator is not necessary, but it really makes everything easier. My examples are below.
For missing keys, I agree with @shaharkazaz , if you want to check for missing keys, just run transloco-keys-manager find and look for the missing and unused keys. If you wanted it automated, maybe there is a way to parse the output and make it a pass/fail step in your build process.
i pulled out my setLanguage promise into a function that i can call:
/** setting the language does not happen immediately. It must first load,
* then change detection must fire.
* This method will set the lang, and wait for it to load and detect changes. */
async function setLang(lang: string) {
await new Promise(resolve => {
translocoService.events$.pipe(
filter((t: TranslocoEvents) => t.type === 'translationLoadSuccess')
).subscribe(t => resolve());
translocoService.setActiveLang(lang);
}).then(() => spectator.detectChanges());
}here is my beforeEach:
beforeEach(() => {
// tests were written for the case that spanish is the default language
TranslocoConfigProvider.useValue.defaultLang = 'es';
spectator = createSpectator();
translocoService = spectator.inject(TranslocoService);
// set lang here so we can make sure it is loaded before running tests
setLang('es');
});make sure to also use the TranslocoTestingModule, here's what I used, borrowed from Transloco:
export const languageMap = {
en,
es,
'i18nTest/en': admin,
'i18nTest/es': adminSpanish,
'lazyPage/en': lazy,
'lazyPage/es': lazySpanish,
'mf/en': transpilersMessageFormat,
'mf/es': transpilersMessageFormatSpanish
};
export function getTranslocoTestModule(config: Partial<TranslocoConfig> = {}) {
return TranslocoTestingModule.withLangs(
languageMap,
{
availableLangs: ['es', 'en'],
defaultLang: 'es',
fallbackLang: 'en',
...config
}
);
}