Angular 6 - Translate Dynamic Text

Question

For all the static text in my app I am using i18n but now I have come across a case like this. In my service.ts file I have some hard coded JSON like

sources = [
{ title: 'Phone', description: 'phone description', icon: 'phone', type: 'phone' },
{ title: 'Chat', description: ' Chat description', icon: 'chat', type: 'chat' },
{ title: 'Email', description: 'Email description', icon: 'mail_outline', type: 'email' }
];

Then in my HTML I am *ngFor'ing though this, problem is I can't do the i18n in the HTML. Current solution is to in my TS file get the user language or browser language if I don't have user lang and then get a different JSON from the service, depending on this.

Can anyone think of another solution or way around this?

Thank you

with Angular 9 you could do it like this too stackoverflow.com/a/61006883/3160597 — azerafati
– azerafati, Commented Apr 3, 2020 at 14:33

yogibimbi · Accepted Answer · 2018-07-31 13:02:15Z

You might want to look into using the select option of angular translate. That pretty much did it for me.

Oh, and you might want to skip the part where they recommend just using a dummy expression in the source language, I found that that messes up things unnecessarily. And if you are giving out the xlf files for translation, you'll need the source text anyway and "ng xi18n" copies all that superfluous text for you anyway. So, my template looks like this:

...<button class="tab" *ngFor="let tab of tabService.tabs">
    <label i18n="|tab categories@@toolbarTabName">
        { tab.key, select, realTimeEvents {Real-Time} reporting {Reporting} status {Status} dashboards {Dashboards} configuration {Configuration} }
    </label>
</button>...

where tabs.key is the parameter whose value corresponds to whatever comes before the {} after the "select" part of the translation file and the template.

And my messages.nl.xlf file like that:

<source>{VAR_SELECT, select, realTimeEvents {Real-Time Event Messages} reporting {Reporting} status {Status} dashboards {Dashboards} configuration {Configuration}}</source>
<target>{VAR_SELECT, select, realTimeEvents {Real-Time Gebeurtenisse} reporting {Rapportering} status {Status} dashboards {Dashboards} configuration {Configuratie}}</target>

(ignore the quality of the translations, this is still pretty much POC, but it works ;-) )

Collectives™ on Stack Overflow

Angular 6 - Translate Dynamic Text

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related