Core: Parameters in translation keys

[mciureanu]

[ ] bug report => check the FAQ and search github for a similar issue or PR before submitting
[x ] support request => check the FAQ and search github for a similar issue before submitting
[ ] feature request

Right now, if you use interpolation in the translation source/key you will get a translation is applied after the interpolation, so in the next example, if the version is 2.0, ngx-translate will look for a 'Version: 2.0' key in the file.

<div translate> Version: {{ version }}</div>

The way this is currently supported after my understanding, is that you have to remove the parameters from the translation key/source like this:

<div [translateParams]="{ version: version }" translate > Version: </div>

The problem is that the translation key doesn't contain any information about the parameter names that the translator must provide, and when we extract and generate automatically the .pot template and give it to the translators, they have somehow to know the parameter names. Also it would be nice to make as little changes as possible in the angular templates when providing translations.

We thought of using some convention, for example like this:

<div [translateParams]="{ version: version }" translate > Version: [[version]]</div>

In this way the translators will know that the version is a parameter, and that they have to provide something like this; {{version}} in the translated text.

I feel like this is a little hack, and it's not the best way to work out this problem. Do you think there is a better way of doing this? I imagine it is impossible to extract the 'original' uninterpolated value from the translate directive and use it as a key, instead of the interpolated value? I think this would be the easiest solution from my point of view....

[cvaliere]

I'm also using this gettext-ish approach, where the "key" is actually a real text, like this:

<span translate>Level {{level}}</span>

I'm pretty sure it used to work with previous versions of angular and/or ngx-translate. I noticed it doesn't work only a few days ago.

[cvaliere]

@mciureanu did you find a way to make it work?

@biesbjerg it seems to me that you tried to achieve almost the same thing; did you succeed?

thanks!

[biesbjerg]

@cvaliere I did. https://github.com/ngx-translate/core/issues/340#issuecomment-265156635

[cvaliere]

ok, so indeed the updated version of the snippet works (https://github.com/ngx-translate/core/issues/340#issuecomment-280601290)

though, as also said in that issue,
<span>{{ 'Hello { name }' | translate: { name: 'Kim' } }}</span> works, but not <span translate [translateParams]="{name: 'Kim'}">Hello { name }</span>

@biesbjerg did you find a way to make this second syntax also work, or you just go with the 1st one (and it's already great, thank you for this!)

[biesbjerg]

@cvaliere I don't use translateParams so I haven't looked at why it doesn't work. Seems weird that it doesn't!

[cvaliere]

angular won't allow something like <span>Hello {name}</span>

it generates

ERROR Error: Uncaught (in promise): Error: Template parse errors: Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.) ("

[biesbjerg]

I have this code in my app without any issues:

<button ion-item detail-none (click)="onLogout()">
    <ion-icon name="log-out" item-left></ion-icon>
    {{ 'Log out ({ email })' | translate: { email: (user$ | async)?.email } }}
</button>

[cvaliere]

yes, this works

but

<button ion-item detail-none (click)="onLogout()">
    <ion-icon name="log-out" item-left></ion-icon>
        <span translate [translateParams]="{email: (user$ | async)?.email}">Log out ({email})</span>
</button>

would generate the error above

[cyberrranger]

thumbs up