[Feature request] Make the pipe update the translation when the language changes about angular-i18next HOT 11 CLOSED

@Finesse Hello and sorry, somehow i missed your post.
Yes, it's not user friendly as it could be. I've already answered on similar questions, here are the reasons why i18next pipe is a pure pipe:

#27 (comment)

In early versions i tryied to implement impure pipes, but left this idea for several reasons:

Some custom controls or pipes can be dependent on angular LOCALE_ID token. So we want to change angular LOCALE_ID with i18next language.
{
provide: LOCALE_ID,
deps: [I18NextService],
useFactory: (i18next: I18NextService) => {
return i18next.language; //string: 'en', 'ru'...
}
}
The problem is that angular IOC container resolves dependencies as singleton, once LOCALE_ID was requested it will always resolve as the same value (first resolved). The only way to get actual LOCALE_ID value is to register LOCALE_ID as factory function, but than it will break libraries that expect LOCALE_ID to be 'string' (not function).
Here is my stackoverflow question: Dynamicly get LOCALE_ID (resolve per request)

Custom components with own localization support mostly require complete reinit on language change.

Also most l10n, i18n and date format (momentjs) angular pipes are pure, and changing i18next language or LOCALE_ID won't trigger pipe change detection for them.

Possible memory leaks and perfomant issues. For example zonejs automatically trigger change detection as a result of async operations, this means using jquery libs with ajax could cause your page (full of impure pipes) freeze.

That is why i ended up with simply refreshing page with a new language. We only need to setup right language, locale and formats on angular initialization.

Also i had impure i18next pipe implementation that was statefull - it had memoisation that returned already translated result if input params and language did not change. It worked well. But in my real world projects language changed immediately, but "angular moment " pipes was not called (they are pure), third party controls also needed to be manually reinit...

So impure pipe would cause perfomance freezes (mostlty because of zonejs). And it wouldn't solve probles with already resolved LOCALE_ID and angular pipes dependent on it LOCALE_ID (it can be updated only rebootstraping angular or refreshing page).

Hack with the creating copy of value of translation key could help us:

let copy = { ...original }

But our key (for example: 'common:hello') is string and it is not a reference type (but a value type), you can't change reference pointer as you could do with an object. And changing language doesn't change a key, it is still the same.

from angular-i18next.

@Romanchuk Thank you for the explanation (though I haven’t comprehended it because I don’t know Angular guts). It’s sad that Angular restrains us with such ridiculous limitations.

Also i had impure i18next pipe implementation that was statefull - it had memoisation that returned already translated result if input params and language did not change. It worked well.

Maybe you can return this pipe as an extra pipe? For example

<div>
  {{ 'tranlation_key' | i18nextEager }}
</div>

from angular-i18next.

Hi @Finesse please take a look at this simple implementation of i18next, shows how to change the language, plurals, etc... at least for me is always easier look at a sample code
i18nextSample

from angular-i18next.

Maybe you can return this pipe as an extra pipe? For example

@Finesse It is possible, i'll think about it in first half of january

from angular-i18next.

@scastaldi As I can see, the component reloads the page when the language changes. This is not what I want to achieve.

@Romanchuk It would be great. Thank you!

from angular-i18next.

@Finesse Hi, i just released version 7.2.0-beta with a new i18nextEager pipe. It is impure pipe so i highly recommend to use it only in combine with OnPush change detection strategy, or else (default change detection) each pipe will retrigger more than one time. You can use it without reloading page.
Also this release supports latest i18next version.

from angular-i18next.

@Romanchuk Thank you, I’ll try it today

i highly recommend to use it only in combine with OnPush change detection strategy

Could you please give me a link where I can read about this strategy (especially how to use it with a pipe)

from angular-i18next.

@Finesse
https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4
https://indepth.dev/the-essential-difference-between-pure-and-impure-pipes-in-angular-and-why-that-matters/
https://angular.io/guide/pipes

Angular executes an impure pipe during every component change detection cycle. An impure pipe is called often, as often as every keystroke or mouse-move.

With zone.js and Default change detection enabled it will cause huge perfomance issues

from angular-i18next.

@Romanchuk It works as expected, thank you! The first link was helpful. The issue is resolved for me.

from angular-i18next.

Ok, i will release stable version and update docs to cover i18nextEager pipe usage

from angular-i18next.

Docs updated

from angular-i18next.