ngx-translate : How to provide context for translations in html and ts files?

Question

I am using ngx-translate to support I18N in my angular 5 application.

I wanted to know how i can specify the context for the word /sentence getting translated?

Example code from HTML:

<span class="arc-gauge-title">{{title | translate}}</span>
<app-change-pages-dropdown [pageTitle]="pageTitle | translate"></app-change-pages-dropdown>

Example code from TS file:

fTitle = TRANSLATE("Completion rate");

"TRANSLATE" is a service which extracts the text from translation. Below is the code:

    export function TRANSLATE(str: string) {
    return str;
}

I am using "ngx-translate-extract" to extract strings for translation. Below is the command from package.json:

"extract-translations": "ngx-translate-extract --input ./src --output ./src/assets/i18n/ --clean --sort --format namespaced-json --marker TRANSLATE"

Any help in specifying the context for the string to be translated is appreciated.

Thanks in advance.

What do you mean by "context"? It isn't very clear from your explanation. — Tsvetan Ganev
@Tsvetan Ganev: somehting similar to what is mentioned in this link: angular.io/guide/… (To translate a text message accurately, the translator may need additional information or context.) Can we add a description of the text message as the value of the 'translate' attribute? — user2439903
I don't think so. ngx-translate has a simpler key-value translation schema. If you need need more advanced features, you would better use the official Angular i18n. — Tsvetan Ganev
I don't believe ngx-translate supports files that would contain this 'context'. They only support key/value pairs where the key is a string and the value is either a string or an object of the key/value pairs. Looking at the unit test code for the ngx-translate-extract library, I don't see any examples that would consist of this type of 'context' specification so I don't think they support that: github.com/biesbjerg/ngx-translate-extract/blob/master/tests/… — Daniel W Strimpel
@Tsvetan Ganev: Yes, Angular i18n was the first i evaluated, but it does not have support for translation in TS file and also have to compile app separately for different languages, which I don't want to do. So ngx-translate was the fallback. — user2439903

Tenuj Tenuj · Accepted Answer · 2020-02-25T15:47:30

You can use forked version where you can specify string context and comment.

You can do it like this:

<div translate-context="US State" translate-comment="Please, translate it as US STATE." translate>
  US State.Georgia  
</div>

<div translate-context="Country" translate-comment="Please, translate it as COUNTRY." translate>
    Country.Georgia
</div>

https://www.npmjs.com/package/@shavenzov/ngx-translate-extract

ngx-translate : How to provide context for translations in html and ts files?

1 Answers