Using translations within html attribute

[ngx-translate]

Using translations within html attribute

[ocombe]

You should either use [title]="'HELLO' | translate" or title="{{ 'HELLO' | translate }}", but [title]="{{ 'HELLO' | translate }}" is not correct Angular

[ocombe]

You're supposed to use your key, something like that:

<ion-refresher pullingText="{{ 'PULL' | translate }}">

And then you define the translation in your json file (or you manually) like that: "PULL": "Pull to refresh..."

In this case "PULL" is the key, and "Pull to refresh..." is your translation.

[ocombe]

fetchTranslation(key: string, params = {}) {
    return this.translate.instant(key, params);
}

or you could just use the service:

[title]="translate.instant('HELLO')"

But be careful because if you use the change detection OnPush this will not update your view, you should use the pipe or directive for that.

[ocombe]

no, it's in the docs: https://github.com/ngx-translate/core#methods

[ZigaVukcevicDev]

I apologise, this was an error triggered by some other issue.

[ZigaVukcevicDev]

@ocombe it also works with hardcoded string.

[elliotwesoff]

What if we have the HTML attribute tied to a component property? For example...

[title]="{{ 'HELLO' | translate }}"

Or even using a method like this in the component doesn't work for me. It just puts undefined in the view:

[title]="fetchTranslation('HELLO')"

fetchTranslation(key: string, params = {}) {
    this.translate.get(key, params).subscribe((res: string) => {
        return res;
    });
}

[elliotwesoff]

Got it. Thanks for the quick reply! :) any idea how to get the service thing working though? That would really help with keeping the views tidy.

[elliotwesoff]

Worked like a charm! Thank you 👍

By the way, is there any extra documentation available? Like would I have needed to read the source to find out about that method?

[cryptoplastic]

I have the above working, but I become stuck when using data-title on tables.

data-title="{{fetchTranslation('name')}}"

for example does not work.

Is there a was to get this working with data-title? This is a key property for displaying data on mobile.

[chaimmw]

I had this problem,
[title]="'Location' | translate" shows a tool-tip

but,

[title]="'Historical Development' | translate" does not show a tool-tip
same for
title="{{ 'Historical Development' | translate}}"
but when I remove the translate pipe -
title="'Historical Development'" does show a tool-tip