Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Shahar Kazaz
    @shaharkazaz
    @/all There is a new disscusions tab on Github, feel free to use it as well!
    smmarrocco
    @smmarrocco

    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

    Shahar Kazaz
    @shaharkazaz
    @smmarrocco Hey! you are right, that could be cool and actually pretty easy to support since we already support translation objects.
    I'll find the time to add this ability where given an array, each value will be transpiled :thumbsup:
    So keep an eye out for the next version :wink:
    smmarrocco
    @smmarrocco
    @shaharkazaz too cool!! Fantastic, glad it’s doable. Will keep an :eyes: out! Thank you
    Shahar Kazaz
    @shaharkazaz
    @smmarrocco released in v2.20.0 :slight_smile:
    smmarrocco
    @smmarrocco
    @shaharkazaz way too excited for this! thank you for the quick delivery, going update now
    Dale Nguyen
    @dalenguyen

    Question on translocoDate PIPE. How can I display day & month only? (E.g. Dec 12). In the documentation, the guide is limited.

    https://github.com/ngneat/transloco/blob/master/projects/ngneat/transloco-locale/src/lib/pipes/transloco-date.pipe.ts

       * 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
    Shahar Kazaz
    @shaharkazaz

    @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:

    1 reply
    Victor Diaz
    @vdiaz1130

    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!

    Shahar Kazaz
    @shaharkazaz
    @vdiaz1130 Have you seen this section in our docs? I think that's the answer to your question :slight_smile:
    Methods prefixed with translate are synchronous and will only work if your translation is already loaded.
    You can use selectTranslateObject
    Victor Diaz
    @vdiaz1130
    image.png

    @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.

    Victor Diaz
    @vdiaz1130
    I figured it out - had to add this.scope (reference to @Inject(TRANSLOCO_SCOPE) private scope):
    let result = this.translocoService
      .selectTranslateObject(
        'generalSettings',
        {
          title: { value: 100 },
        },
        this.scope, // added this...
      )
    Shahar Kazaz
    @shaharkazaz
    :thumbsup:
    pookdeveloper
    @pookdeveloper
    Hi what is the purpose of "transloco.config.js"
    if I delete this file it's still working, thanks!!!
    François
    @GrandSchtroumpf

    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 ?

    the component using the pipe already load another scope unfortunately.
    François
    @GrandSchtroumpf
    In the end I used the load. I'm not sure it's the right way to do though as it triggers load on every pipe instance (event with shareReplay).
    Patrick Zhong
    @zhongsp
    @shaharkazaz Does transloco support multiple fallback language for missing translation key and missing whole language? For example, the fallbacks are "fr-CA -> fr -> en" for language AND for missing translation keys.
    Shahar Kazaz
    @shaharkazaz
    @GrandSchtroumpf as the docs states, when using the synchronous translation methods (prefixed with translate) you need to make sure the translations are loaded.
    I don't think you have much of a performance issue regarding the load since it's cached, why not use selectTranslate with take(1)?
    @pookdeveloper It's a configuration file mostly used by our plugins & tools (keys manager, scoped lib extractor, etc), that's why the core functionality works without it :thumbsup:
    Shahar Kazaz
    @shaharkazaz
    @zhongsp If a translation file fails to load, all the keys you will try to translate will be taken from the fallback, did I understand your question correctly?
    Patrick Zhong
    @zhongsp
    @shaharkazaz I defined a custom 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.
    But, if it can load fr-CA.json, but missing a key in fr-CA.json. Does transloco can try fr-CA / fr / en for the missing translation key?
    Patrick Zhong
    @zhongsp
    @shaharkazaz I enter an issue for language fallbacks, please help to look at it when u are free. Thanks. ngneat/transloco#389
    Shahar Kazaz
    @shaharkazaz
    @zhongsp :thumbsup:
    Yaza Wainakh
    @YazaWainakh
    Hello all,
    I have a problem with translations showing in production. I have created an issue ngneat/transloco#387, but I was directed to this channel. Any idea what the problem could be?
    Already tried to use the relative path for the JSON files as mentioned as a note here.
    Shahar Kazaz
    @shaharkazaz
    @YazaWainakh have you tried following the official guide?
    if you start a new project and install the library using the schematics do you still have issues? try it and see what's the difference.
    Nicola Toledo
    @ToledoNicola

    Schermata 2020-12-29 alle 16.56.46.png

    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 the
    providers: [ { provide: TRANSLOCO_SCOPE, useValue: 'countries', }, ],

    inside the component and use the translate method but don't work 😕

    Nicola Toledo
    @ToledoNicola
    I miss something?
    Shahar Kazaz
    @shaharkazaz
    @ToledoNicola can you please provide a small reproduction? :slight_smile:
    This message was deleted
    Nicola Toledo
    @ToledoNicola

    Schermata 2020-12-31 alle 13.03.26.png

    hi @shaharkazaz thanks for reply, ok is a little bit difficult but i will try

    can be some problem in the scope or the lazy route?
    this is the global configuration

    Nicola Toledo
    @ToledoNicola

    Schermata 2020-12-31 alle 13.06.37.png

    and this is the import in the app.module

    and then inside my lib in the component i just override the TRANSLOCO_SCOPE with the scope name

    Yaza Wainakh
    @YazaWainakh
    @shaharkazaz it worked in my project when I removed the AOT flatting configuration,
    The translations that are not nested appear correctly, but the nested ones only show the translation key, any ideas why?
    flatten: {
              aot: environment.production,
            }
    Yaza Wainakh
    @YazaWainakh
    I have another general question, why does 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)
      }
    }
    Nicola Toledo
    @ToledoNicola
    if ivy is disabled it's ok for transloco?
    tipyaf
    @tipyaf
    Hello, I wanna set availableLangs ( in translocoConfig) from server side. Does it possible ? Thanks :)
    Shahar Kazaz
    @shaharkazaz
    @YazaWainakh if you implement them like that you get both the translations bundled even if not both are used, but if it suits your needs use it like that, that's one of the fun things about building a hackable library :muscle:
    Regarding the flattening, it's kind of hard answering this question since it's very general and I don't see usage examples, please provide a small reproduction so we can try and help :slight_smile:
    @ToledoNicola You can use transloco with View Engine :thumbsup:
    @tipyaf yes you can, use the setAvailableLangs method
    tipyaf
    @tipyaf
    @shaharkazaz Thankx !!
    Weston
    @ronnyek
    we're running into a problem running transloco-keys-manager in a linux environment... we're seeing:
    Checking for missing keys ✨Cannot read property 'split' of undefined
    this is a version that is recent enough to include a bug fix for that was more than 1yr old
    I am seeing the following arguemtns getting passed into 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
    Weston
    @ronnyek
    after running translation path through the toUnixFormat returns $
    Weston
    @ronnyek
    well that could be changes I made, I'm looking at it
    Weston
    @ronnyek
    ends up problem is likely to be related for having paths with ./ in transloco.config.js
    fnuMMS
    @fnuMMS
    Hey ... how can I translate placeholder attributes for example in input-fields: <input placeholder="{{'MY_ID' | transloco}}"> <-- this does not work