Hey everyone! Curious question about providing params to a json array with just the template.
For example, consider the following language file
{
"LISTS": [
"List Item 1 {{param}}",
"List Item 2",
"List Item 3 {{param}}"
]
}
Does anyone have a solution to provide the parameter while using the above in a *ngFor
?
Doing it like such does not work, which is expected:
<ul>
<li *ngFor="let item of ('LISTS' | transloco: { param: 'Hello World'})">item</li>
</ul>
I was able to achieve this by using selectTranslationObject
in the respected component file and change my json array to an object of objects but it would be pretty cool if I can accomplish this just in the template
Question on translocoDate
PIPE. How can I display day & month only? (E.g. Dec 12). In the documentation, the guide is limited.
* date | translocoDate: {} : en-US // 9/10/2019
* date | translocoDate: { dateStyle: 'medium', timeStyle: 'medium' } : en-US // Sep 10, 2019, 10:46:12 PM
* date | translocoDate: { timeZone: 'UTC', timeStyle: 'full' } : en-US // 7:40:32 PM Coordinated Universal Time
* 1 | translocoDate: { dateStyle: 'medium' } // Jan 1, 1970
* '2019-02-08' | translocoDate: { dateStyle: 'medium' } // Feb 8, 2019
@dalenguyen Transloco L10N uses the native Intl
, you can read more about date formatting here.
The following code should produce the output you want:
new Intl.DateTimeFormat('en-US', {month: 'short', day: 'numeric'}).format(Date.now())
This means that {month: 'short', day: 'numeric'}
is the config you are looking for :smile:
Hello. I'm trying to follow the example here https://ngneat.github.io/transloco/docs/inline-loaders
but I'm lacking clarity. I have the following JSON:
{
"generalSettings": {
"title": "General Settings",
"header": "Edit the configuration for your store.",
"clientInformation": {
"sectionLbl": "Client Information"
}
}
}
In my features module, I have:
imports: [
...
TranslocoModule
],
declarations: [
...all components
],
providers: [
{
provide: TRANSLOCO_SCOPE,
useValue: {
scope: 'shopSettings',
loader,
},
},
],
The template works well. I have the following:
<div *transloco="let t; read: 'shopSettings.generalSettings'">
<h2>{{ t('title') }}</h2>
{{ t('header') }}
</div>
However, in the component file, I can't seem to load the translation. Each of the following queries logs error:
constructor(
private translocoService: TranslocoService,
) {}
ngOnInit() {
let result = this.translocoService.translateObject('shopSettings.generalSettings.clientInformation');
result = this.translocoService.translateObject('generalSettings.clientInformation');
result = this.translocoService.translateObject('clientInformation');
}
// outputs:
// Missing translation for 'shopSettings.generalSettings.clientInformation'
// Missing translation for 'generalSettings.clientInformation'
// Missing translation for 'clientInformation'
What am I missing? Thanks!
translate
are synchronous and will only work if your translation is already loaded.selectTranslateObject
@shaharkazaz Thanks for the reply. I've tried selectTranslateObject as you suggested and I get the same error message. To be clear, the en.json file is in a directory within the feature module:
https://files.gitter.im/5d5555fcd73408ce4fc87fc0/qquh/image.png
and I have a loader function in the feature module:
export const loader = ['en', 'es'].reduce((acc, lang) => {
acc[lang] = () => import(`./_i18n/${lang}.json`);
return acc;
}, {});
The template markup sees the translations but I can't get it to show up in the component logic.
Hello, I'm using the TranslocoService
in a pipe and I would like to access a lazy loaded scope when I do :
this.transloco.translate('key', {}, 'scopeName')
I've got Missing translation for scopeName.key
. I tried to provide the TRANSLOCO_SCOPE in the module in which the pipe is declared, but it didn't help. Anyone has an idea how to fix that ?
translate
) you need to make sure the translations are loaded.take(1)
?
LanguageFallbackStrategy
in my app to try a set of fallback languages, e.g. fr-CA / fr / en. I think it works for a translation file fails to load.hi everyone, i hava. a problem, i can't get the translation in the scope 'countries'
the default language is 'it' so should get countries/it.json right?
i use nx
i tried also with inject theproviders: [
{
provide: TRANSLOCO_SCOPE,
useValue: 'countries',
},
],
inside the component and use the translate method but don't work 😕
getTranslation
uses an http request and not just import the files and return them as :import de from '@assets/i18n/de.json'
import en from '@assets/i18n/en.json'
export class TranslocoHttpLoader implements TranslocoLoader {
constructor() {}
getTranslation(lang: string): Observable<Translation> {
return lang === 'de' ? of(de) : of(en)
}
}
getScopeAndLangFromFullPath.js
filePath: /home/agent/_work/4/s/apps/frontend/src/assets/i18n/ar.json
translationPath: /home/agent/_work/4/s/apps/frontend/src/assets/i18n