5

I've implemented ngx-translate in my Angular-Cli app and works fine when I do something like:

<div>{{ 'some.value' | translate }}</div>

But how can I go about translating an attribute of an HTML component? Something like:

<div data-text="{{ 'some.value' | translate }}"></div>

(this code above doesn't work)

Thanks in advance for any help provided...

JB

Strider
  • 3,539
  • 5
  • 32
  • 60
john.acb
  • 173
  • 2
  • 12

2 Answers2

11

What error are you getting?

The code, as it appears, should work, but there's also another option to try:

<div [data-text]="'some.value' | translate"></div>

Off the top of my head, I'd guess you're getting an error like 'data-text' is not a property of <div>, in which case it's not an ngx-translate issue but a missing imports in your .component.ts file that could add the missing attribute.

MCattle
  • 2,897
  • 2
  • 38
  • 54
  • 3
    Thanks for help +MCattle. That was more or less the error I was getting. Found this helpful link: https://stackoverflow.com/questions/43386590/cant-bind-to-target-since-it-isnt-a-known-property-of-div Turns out doing this solved the issue: `
    `     – john.acb Nov 25 '17 at 23:33
3

This should work

<div [attr.my-attribute]="'value.to.translate' | translate"></div>
Strider
  • 3,539
  • 5
  • 32
  • 60