Wait for translation to load and than show translations

[alejandrocoding]

Is there an existing issue for this?

• I have searched the existing issues

Which Transloco package(s) are the source of the bug?

Transloco

Is this a regression?

No

Current behavior

I have a dropdown language selector, when I switch to another language I show a snackbar.

The problem is that if the language has not been loaded before, the snackbar does not show the translation, but rather the json key path to that value. Like if the key was missing.

Workaround: Using a setTimeout of 100ms before showing the snackbar works.

More thoughts about it:

• To change the language I am using setActiveLang('lang-code') and that method is asynchronus, I wonder if it's a better idea to return the promise/observable rather than void.
• Because the workaround is not of my joy, I tried to use transloco.langChanges$, subscribes to it and from there call the snackbar with the message. Also fail. Would be a good idea to emit once the file has been fully loaded or expose another observable for that?

This does not affect pipes or directive content, probably given the way they are made.

Expected behavior

I would expect there should be a way to be notified once a language is fully loaded and ready to be used correctly.

Note: If I am missing something that I haven't seen in the doc I very apologize in advance.

Please provide a link to a minimal reproduction of the bug

i-can-try-to-provide-something-later

Transloco Config

No response

Please provide the environment you discovered this bug in

Transloco: 
Angular: 
Node: 
Package Manager: 
OS:

Browser

No response

Additional context

No response

I would like to make a pull request for this bug

Yes 🚀

[shaharkazaz]

@alejandrocoding I've converted this into a discussion as this is a question relating to a specific use case, if we find that there is a generalized problem here we can address this as an issue :)
Have you tried the events$ observable to indicate when to call your snackbar?

[shaharkazaz]

@alejandrocoding Can you please share a small reproduction so I can better assist?
I understand your thought regarding these streams but they are not the same, this is actually one of the things I'm taking into consideration when designing the next major version.
I don't want the resolution to be just some arbitrary delay.

[alejandrocoding]

There you go @shaharkazaz
https://stackblitz.com/edit/transloco-lang-bug?file=src/app/app.component.ts

I've included the discussed work arounds (they all are based on an arbitrary delay, but different strategies).

I have checked with some mates using the library to see if they are experiencing the same, and they are not because they need to reload after language changes. I think this is the key part. I see this issue happening to everyone who has a combination of: reRenderOnLangChange: false + show info of action by any component (snackbar, toast, popup...) - and this sounds to me like a wide range of scenarios, but I am not sure how many folks are refreshing after lang changes.

[shaharkazaz]

@alejandrocoding You just need to use selectTranslate which waits for the translation to load, based on the example provided the following will work:

    this.translocoService.setActiveLang(lang);
    this.translocoService.selectTranslate('message').pipe(take(1)).subscribe((msg) => {
      this.snackBar.open(msg, '', { duration: 5000 });
    });    

[alejandrocoding]

I don't know how I missed that part of the documentation where you are making this big and clear!

Probably I was just focused on finding an observable that emitted when ready rather than a method and skipped that part of the doc, I am sorry for taking your time looking at this.

Thanks @shaharkazaz

[shaharkazaz]

@alejandrocoding You're welcome.
On a different note, If you or your company find this lib and other ngneat OS useful please consider sponsoring us to keep these projects going 🙏
We have different perks for sponsorship tiers, you can check them out here.