Change language in web

[rboixaderg]

Hi! Can I modify current web language by for example, a selector in the web? I see TranslatePipe which it get current language from provider. But I don't know if it possible to modify it in the web without modify provider value.

I want to change catalan to english or english to catalan in the same web.

Thanks!

[ebrehault]

Hi Roger! It is not supported at the moment. Up to now, the regular use case considers the language is known at the time the app starts (either it is hard-coded in the module code, either we take it from navigator.language). But being able to change the language dynamically when the app is running is definitely a feature we want! I guess we could create a TranslateService providing a setLang(lang: string) method.

If you feel like you want to try to start a PR for that, I will be happy to guide and support you :)

[rboixaderg]

Hi eric! I create a pull request, I don't know if it the correct way to implement this.

[ebrehault]

Excellent! Thank you for your contribution!

[rboixaderg]

Hi @ebrehault when I change the current language, I call markForCheck to dectect changes, but not change anything, If I change the page, then yes, it apply changes. Do you know what it could be?

Thanks!

[ebrehault]

I guess it is because Angular makes some caching, so when a pipe is called with the same input a second time, Angular just returns the value it computed on the first call. We could avoid caching by using a impure pipe:

@Pipe({
    name: 'translate',
    pure: false,
})

Then there is no caching, but it might impact performances.

I would suggest the following:

• try it on your own to check if an impure pipe fix your problem, and check if performances are ok ;
• if so, then make a new PR implementing 2 translate pipe: the regular one (pure) and new one (translate-impure for example). Both will use the very same implementation (you can factorize it under a BaseTranslatePipe class for example) but just 2 different @Pipe decorators. That way, people who do not need dynamic language switching can continue to use a pure pipe

What do you think?

[rboixaderg]

I try to change pipe to impure, but it not works. I create a new PR with an example in demo if you want to check it.

[mpellerin42]

I don't think it's a problem of caching pure vs impure pipe. But markForCheck doesn't work on asynchronous stuff.

Did you try to replace the markForCheck by a detectChanges?

Le ven. 26 nov. 2021 à 00:14, Roger Boixader Güell @.***> a écrit :

I try to change pipe to impure, but it not works. I create a new PR with an example in demo.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/plone/pastanaga-angular/issues/527#issuecomment-979510532, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAZEF4I2CK3EJASU2DLKBFTUN27N5ANCNFSM5IWGHHPQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

[ebrehault]

detectChanges does not fix it. But I have noticed that, in the demo, if you click on the "Change language" button, then you collapse the "Translate" section and open it again, then the translations are updated.

[rboixaderg]

I try with detectChanges and as @ebrehault says it does not work. Then when you collapse the "Translate" section and open it again, it works. But in this case it works because angular rerender the translate section, and execute the translation pipe again and then the current language has changed.

[ebrehault]

Exactly. So that's a bit extreme (actually, we would have the same behavior with a pure pipe). Nevertheless, that's not entirely crazy (we can assume users will not change lang every 5 seconds, so if we have to re-paint the entire app after changing the lang, that's probably a reasonable price to pay). But maybe there is a less brutal solution.

[rboixaderg]

Yes, but how can we rerender all page without reload it?

[ebrehault]

You can just route again to the current route (if you're using Router). In the demo, we use angular-traversal so it goes like this:

   changeLanguage() {
        this.translateService.setLang('ca');
        this.traverser.traverseHere();
    }

It works fine (even with a pure pipe).

[rboixaderg]

Thanks It works! Shall I update the demo with this?

[ebrehault]

yes please, and also, remove the pure: false thing as it is not needed

[rboixaderg]

Done!

[ebrehault]

Molt bé, gràcies!