On the left is a production build using inline loader class and on the right is the local build.
I am using webpack's import to load the json files inline. But somehow the default nl/en.jsons are loaded as a object in production
@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
