CODEWITHSUNDEEP
angular6angular-i18n
Andrés Oviedo
Andrés Oviedo

Reputation: 1428

Angular i18n - Interpolation

I am following the Angular i18n guide: https://angular.io/guide/i18n

I got how to interpolate correctly a "String + Variable".

<trans-unit id="interpolated-persons" datatype="html">
        <source>Persons: <x id="INTERPOLATION" equiv-text="{{number-of-people}}"/></source>
        <target>Personas: <x id="INTERPOLATION" equiv-text="{{number-of-people}}"/></target>
</trans-unit>

<span i18n="@@interpolated-persons">Persons: {{persons}}</span>

However, I don't get how to interpolate a "String + Plural".

<trans-unit id="interpolated-time" datatype="html">
        <source>Time: <x id="ICU" equiv-text="{tempo, plural, other {...}}"/></source>
        <target>Tiempo: {tempo, plural, =60 {una hora} =1440 {un día} =10080 {una semana} other {mucho tiempo}}</target>
</trans-unit>

<span i18n="@@interpolated-time">Time: {minutes, plural, other {{{minutes}} elapsed}}</span><br>

I have tried several things. The only way I made it work was changing tempo by a hardcoded value or the minutes variable directly in the <target>. However, if I do that I won't be able to reuse the same translation in another page.

Is it possible to interpolate a String + Plural?

Upvotes: 4

Views: 7907

Answers (2)

Scott-MEARN-Developer
Scott-MEARN-Developer

Reputation: 392

Try this: Just say you have a variable 'secondsRemaining' and you want to include in in a string like this:

<span>There are 10 seconds left</span>
<!-- secondsRemaining = 10 -->

<span>There is 1 second left</span>
<!-- secondsRemaining = 1 -->

<span>Out of time</span>
<!-- secondsRemaining = 0 -->

You could do something like this in your html file:

<span i18n>{secondsRemaining, plural, =0 {Out of time}
                      =1 {There is 1 second left} other {There are
                      {{secondsRemaining}} left}}</span
                    >

Then, after extraction, you can make your trans-unit look like this:

<trans-unit id="6794418477110295816" datatype="html">
  <source>{VAR_PLURAL, plural, =0 {Out of time} =1 {There is 1 second left} other {There are
  <x id="INTERPOLATION" /> seconds left}}
  </source>
  <target>{VAR_PLURAL, plural, =0 {Sin tiempo} =1 {Queda un segundo} other {Queda
    <x id="INTERPOLATION" /> segundos}}
  </target>
  <context-group purpose="location">
    <context context-type="sourcefile">src/app/your-folder-path/your-file.component.html</context>
    <context context-type="linenumber">100</context>
  </context-group>
</trans-unit>

Of course, this is using an auto-generated ID. Feel free to add your own id to the span.

Upvotes: 0

Andr&#233;s Oviedo
Andr&#233;s Oviedo

Reputation: 1428

Angular splits "String + Plural" expression in 2 simpler expressions.

The plural inner expression gets a random identifier and it should match the trans-unit "id" in the messages.xlf file in order to work.

The exact Translate a nested expression example in https://angular.io/guide/i18n should be like this:

<trans-unit id="interpolated-time" datatype="html">
    <source>Updated: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></source>
    <target>Actualizado: <x id="ICU" equiv-text="{minutes, plural, =0 {...} =1 {...} other {...}}"/></target>
  </trans-unit>
  <trans-unit id="7151c2e67748b726f0864fc443861d45df21d706" datatype="html">
    <source>{VAR_PLURAL, plural, =0 {just now} =1 {one minute ago} other {<x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutes ago by {VAR_SELECT, select, male {male} female {female} other {other} }} }</source>
    <target>{VAR_PLURAL, plural, =0 {justo ahora} =1 {hace 1 minuto} other {hace <x id="INTERPOLATION" equiv-text="{{minutes}}"/> minutos por {VAR_SELECT, select, male {un hombre} female {una dama} other {otro} }} }</target>
  </trans-unit>

The id 7151c2e67748b726f0864fc443861d45df21d706 should be obtained from compilation output:

Missing translation for message "7151c2e67748b726f0864fc443861d45df21d706"

Upvotes: 4

Related Questions