How pass a variable using $localize

Question

I am using i18n to translate my Angular 2 application. I need to send a variable to a translation unit from ts.

I have the following trans-unit:

<trans-unit id="summary_hotel_tax" datatype="html">
    <source>In <x id='INTERPOLATION' equiv-text='{{ citiesList }}'/> are taxes</source>
    <target>A <x id='INTERPOLATION' equiv-text='{{ citiesList }}'/> pagare tassa turistica</target>
   </trans-unit>

I have tried to do the following in my hotel.ts (component):

$ localize`:@@summary_hotel_tax:In $ {citiesList} are taxes`;

But it does not work.

I get the error:

ERROR in There is a placeholder name mismatch with the translation provided for the
message "summary_hotel_tax" ("In {$PH} are taxes").The translation contains a
placeholder with name INTERPOLATION, which does not exist in the message.

I understand that maybe it wouldn't be an interpolation when using $localize, in which case how should I structure my trans-unit to send it a variable from $localize.

Parameter

Answer 1

I have found the following solution and it has worked for me:

$localize`:@@identification_trans_unit: Text text ${variable}:INTERPOLATION: another text`;

The ID must be placed next to the variable, in this case:

 ${variable}:INTERPOLATION:

Parameter

Answer 2

This should work:

$ localize`:@@summary_hotel_tax:In ${citiesList}:citylist: are taxes`;

And in localization file, use:

<trans-unit id="summary_hotel_tax" datatype="html">
    <source>In <x id='citylist'/> are taxes</source>
    <target>A <x id='citylist'/> pagare tassa turistica</target>
</trans-unit>

https://angular.io/guide/i18n-common-prepare#include-interpolated-text

Filum