CODEWITHSUNDEEP
angularangular-i18n
Viswa
Viswa

Reputation: 821

Angular i18n - Translate Typescript value in HTML Attribute Display

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.

Upvotes: 1

Views: 1890

Answers (2)

Sankarshan Pandey
Sankarshan Pandey

Reputation: 41

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.

Upvotes: 0

tair yassine
tair yassine

Reputation: 31

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!

Upvotes: 1

Related Questions