Translation function not executed for components using ngx-translate with ngx-translate-messageformat-compiler

UI Components for Angular
Post Reply
superholz
Posts: 3
Joined: 30 Dec 2020, 17:48

08 Jan 2021, 15:17

Hi, to implement internationalization and pluralization I tried to use ngx-translate with ngx-translate-messageformat-compiler.

If not using the latter I also get to work PrimeNg componets to be translated (e.g a calendar). When I use ngx-translate-messageformat-compiler somehow the translation function handed over to PrimeNGConfig is not executed properly. Does anyone an explanation or solution for this?

Image

Code to feed translation to primeNG componets:

Code: Select all

    this.translateService.get('primeng').subscribe(res => this.primengconfig.setTranslation(res));
in app.module:

Code: Select all

TranslateModule.forRoot({
      defaultLanguage: 'nl',
      loader: {
          provide: TranslateLoader,
          useFactory: (createTranslateLoader),
          deps: [HttpClient],
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: TranslateMessageFormatCompiler
      }

  })
using angular 9.0.4

Code: Select all

 "primeng": "^11.0.0-rc.2",

schartier
Posts: 1
Joined: 30 Apr 2021, 20:35

01 May 2021, 03:38

I was able to fix this issue by doing the following

```
async applyLanguageChange() {
this.translate.get('PrimeNg', {}).subscribe(res => {
const translations = this.fixPrimeNGTranslations(res);
this.primeNgConfig.setTranslation(translations);
});
}

private fixPrimeNGTranslations(translations: any) {
switch (typeof translations) {
case 'function':
return translations();
case 'object':
if (Array.isArray(translations)) {
return translations.map(t => this.fixPrimeNGTranslations(t));
}

for (const key in translations) {
translations[key] = this.fixPrimeNGTranslations(translations[key]);
}
return translations;
default:
return translations;
}
}
```

In order for this to work you must follow the following instructions to set-up your own translations for PrimeNG https://primefaces.org/primeng/showcase/#/i18n

This seems to be a PrimeNG issue since the simple values of primeNg translations are translated properly but not arrays, like months, daysOfTheWeek, etc.

It is possible to observe this issue using
```
this.primeNgConfig.translationObserver.subscribe(translations => {
console.log(translations);
})
```

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests