ngx-translate: how to 'translate' a html attribute?

Question

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

Buskin

Answer 1

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.

Frit

Thanks for help +MCattle. That was more or less the error I was getting. Found this helpful link: #43387090 Turns out doing this solved the issue: <div attr.data-text="{{ 'some.value' | translate }}"></div> – Buskin

Answer 2

This should work

<div [attr.my-attribute]="'value.to.translate' | translate"></div>

Riffraff