0

Is there a chance to do translation for HTML Attributes that will be retrieved from typescript functions? For example, please see below.

<myCustomElement buttonId="personDetails" [title]="CustomSectionDisplayName('PersonDetails')" link="Person details"  linkText="Name, age and gender"></myCustomElement>

For the above code, I would like to translate the value arriving in [title] attribute. For static values, we can achieve this. But here, it is dynamic. So, can someone suggest me any option we have in i18n?

[Note: I am not expecting answers as we can achieve thro other libraries like ngx-translate and so and so.]

I want to know this badly. Kindly let me know.

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Viswa
  • 745
  • 10
  • 30
  • I don't know if my work-around in https://stackoverflow.com/questions/48327401/angular-i18n-work-around-for-translations-in-code/50191658#50191658 can be util or, really, it's a very bad bad idea. Other idea is have a file-fr.json, file-es.json... and read the values from it – Eliseo May 24 '18 at 06:44
  • Hi Eliseo, Thanks for the update. I have checked the link and you are trying to achieve thro' custom translation component. do you have any plunker?Does the translation template will tell the processed text value to xlf file in order to translate it? – Viswa May 24 '18 at 07:02
  • It will be helpful if you have any demo on this. Appreciate your update! – Viswa May 24 '18 at 07:03

2 Answers2

1

I think u can try using canonical form for binding, use for example bind-title instead of [title] then add i18n attribute as follow: i18n-bind-title="test@@title" it works for me!

0

To mark an attribute for translation, add an attribute in the form of i18n-x, where x is the name of the attribute to translate. The following example shows how to mark the title attribute for translation by adding the i18n-title attribute on the img tag:

This technique works for any attribute of any element.

You also can assign a meaning, description, and id with the i18n-x="|@@" syntax.