[Bug]: Dynamically load the translations - Angular

[DiscJockeyDJ]

Expected Behavior

Display the translations when the language is changed through the @ngx-translate service.

Current Behavior

I tried using the setLanguage method, but I believe once run is called, the config won't get updated. Hence, setLanguage isn't working?

Steps to reproduce

Currently, I have like this

ngOnInit(): void {
this.translationService.onLangChange.subscribe((event) => {
// event.translations?.['cookie'] would contain the translations for different languages.
const cookie =(event.translations?.['cookie'] as CookieTranslations) ?? null;
if (cookie) {
CookieConsent.run({
guiOptions: this.guiOptions,
categories: this.categories,
language: {
default: event.language,
translations: {
[event.language] = {
consentModal: {
title: cookie.title,
description: cookie.description,
// and so on
} // The rest of the properties using cookie constant
}
})
}

At this point, how do I ensure that the translations are reflected accordingly when a language is changed?

Proposed fix or additional info.

No response

Version

3.1.0

On which browser do you see the issue?

Chrome, Firefox, Safari, Microsoft Edge

[orestbida]

Not sure what this.translationService.onLangChange.subscribe is, assuming it's related to your angular component.

You should initializze the plugin once in your app/root component, to avoid re-rendering when the page-changes. There should be only one CookieConsent.run(...) call.

Then you can call .setLanguage to manually change the language.

Here is an old setup with angular 14: https://stackblitz.com/edit/angular-ivy-hmegok?file=src%2Fapp%2Fapp.component.ts

[DiscJockeyDJ]

Hi @orestbida

Thanks for the reply.

So, this.translationService.onLangChange.subscribe is an onChange event from the ngxTranslate that occurs when my Angular app chooses a language. For ex, from en to de. Something like that.

I came across this method, CookieConsent.reset(); which resets the cookies.

This checks if the config already has the translation for the selected language

const alreadyLoaded = CookieConsent.getConfig()?.language?.translations[event.language];

Then, a logic like below.

if (firstTimeLoad) {
CookieConsent.run(config);
} else if (!alreadyLoaded) {
CookieConsent.reset(); // Reset the cookies
CookieConsent.run(config);
}

[orestbida]

You should avoid resetting and re-initializing the plugin. That is the last resort in case there is absolutely no way to make the generated html persist across pages.

I created a demo with angular 20: https://stackblitz.com/edit/stackblitz-starters-ssxryhrn?file=src%2Fmain.ts

[DiscJockeyDJ]

I was asking because I update the translations property in the CookieConsentConfig dynamically (i.e.,) whenever there is a language change, there would be a new translation file fetched and added to the translations property.

After that, when I set the language using setLanguage, it's not getting updated. Hence, I had to reset and re-initialise the plugin.

[orestbida]

The plugin already handles this, although not well documented.

interface Translations {
    [locale: string]:
        Translation
        | string
        | (() => Translation)
        | (() => Promise<Translation>)
}

You can do it like so:

CookieConsent.run({
    ...
    language: {
        default: 'en',

        translations: {
            en: () => JSON.parse('/assets/translations/en.json'),
            it: () => JSON.parse('/assets/translations/it.json')
        }
    }
})

In this case only one translation file would be parsed.

Edit: or async

en: async () => {
    const resp = await fetch('path-to-api-or-json-file');
    return await resp.json();
}

[DiscJockeyDJ]

en: async () => {
const resp = await fetch('path-to-api-or-json-file');
return await resp.json();
}

This does work 👍 though I need to do a workaround.

config.language.translations[langCode] = asyncTranslationLoader;

const asyncTranslationLoader = async () => {
// Get the cookie translations from my URL.
// Build the consentModal and preferencesModal object model using the cookie translations and return it.
};

And in the end, something like this

setTimeout(() => {
CookieConsent.setLanguage(langCode);
}, 0);

I think am happy with this 👍