Using i18n in custom element

Help Requests
1

I have a custom element which I refer to as follows:

<simple-cost costing.bind="costing" costings-list.bind="costing.services" costing-value.bind="costing.servicesValue"
show-number-items="true" 

  t="[headertitle]costings.services-headertitle" headertitle="Monthly costs for utilities"      

  t="[coststitle]costings.services-title" coststitle="All costs are per month"                
                     
  t="[headerinfo]costings.services-headerinfo" headerinfo="These costs are entered into the cash flow on a monthly basis."
                     
  t="[pricetitle]costings.services-pricetitle" pricetitle="per month" 

dictionary-items.bind="dictionary.services" calculate.call="costingsService.calculateServicesValue(costing)">
 </simple-cost>

The problem is that I am referring to t= multiple times, and only
t=[headertitle]costings.services.headertitle
is picked up, the subsequent ones are ignored.

How do I get i18n to translate each of the attributes in this custom element?

1 Like
2

Instead of using multiple t attributes use semi-colons as the docs suggest:

  <span t="[html]title;[class]title-class">Title</span>
1 Like
3

Thanks very much - exactly what I needed

2 Likes
4

Interesting. I couldn’t get it to work in my custom element. Instead I had to do

<span class="${title-class | t}">${title | t}</span>