i18n Interpolation + Ternary operator

Bug Report

Affected Package

@angular/localize

Is this a regression?

Don’t Know

Description

When trying to apply i18n translation to a button does not work. The button text is an interpolated expression which has a ternary operator to evaluate te string to show.

When launching the translated app, simple translations work fine, but the button who has the dynamic text stays the same (with the original language) and even stops to change text dynamically as if the expression was frozen.

Minimal Reproduction

(the app sourceLocale is ‘es’ Spanish and the translation is to ‘en’ English) The button example is:

<button mat-raised-button style="width: 100%;" type="submit" color="primary" [disabled]="loading"
      i18n="Boton de login con titulo dinamico">{{loading ? 'Cargando Módulo...' : 'Ingresar'}}</button>

the messages.xlf file is:

      <trans-unit id="187187500641108332" datatype="html">
        <source><x id="INTERPOLATION" equiv-text="{{loading ? &apos;Cargando Módulo...&apos; : &apos;Ingresar&apos;}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/modules/signed-out-module/sign-in/sign-in.component.html</context>
          <context context-type="linenumber">32,33</context>
        </context-group>
        <note priority="1" from="description">Boton de login con titulo dinamico</note>
      </trans-unit>

the messages.en.xlf file is:

      <trans-unit id="187187500641108332" datatype="html">
        <source><x id="INTERPOLATION" equiv-text="{{loading ? &apos;Cargando Módulo...&apos; : &apos;Ingresar&apos;}}"/></source>
        <target><x id="INTERPOLATION" equiv-text="{{loading ? &apos;Loading...&apos; : &apos;Log in&apos;}}"/></target>
        <context-group purpose="location">
          <context context-type="sourcefile">src/app/modules/signed-out-module/sign-in/sign-in.component.html</context>
          <context context-type="linenumber">31,32</context>
        </context-group>
        <note priority="1" from="description">Boton de login con titulo dinamico</note>
      </trans-unit>

I also have tried changing the target in the messages.en.xlf to something like: <target>{{loading ? 'Loading...' : 'Log in';}}</target> But it generates an error (Unable to parse ICU expression in "{{loading ? 'Loading Module...' : 'Log In'}}" message.) so it doesn’t work either.

Exception or Error

Your Environment

Angular Version:

     _                      _                 ____ _     ___ 
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | | 
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | | 
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 12.0.5
Node: 16.1.0
Package Manager: npm 7.11.2
OS: win32 x64

Angular: 12.0.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.5
@angular-devkit/build-angular   12.0.5
@angular-devkit/core            12.0.5
@angular-devkit/schematics      12.0.5
@angular/flex-layout            12.0.0-beta.34
@schematics/angular             12.0.5
rxjs                            6.6.7
typescript                      4.2.4

Anything else relevant?

Nope

[jnizet]

That can’t work, because the text to translate is not some static text of the template, but is part of an angular expression. The i18n system allows translating the static text, but does not touch what is inside angular expressions.

To explain, let’s take a more realistic example.

If you have something like

<p i18n>Hello {{ user.name }}</p>

in the template, what the i18n system allows doing is to translate the Hello part of the text. The rest is a dynamic angulas expression that is a black box and stays unmodified. The translator is allowed to move it in the translated message, but the expression will always be untouched. So the translator can translate it to Ola <x id="INTERPOLATION /> or <x id="INTERPOLATION" />: Ola!, but the interpolation stays the same as it is in the original source code: it’s not supposed to be translated.

If it was, the translator could transform it to Ola {{ usuario.nombre }} and break everything, and you really don’t want that.

So, to fix your issue, what you should do is to avoid using static text that needs to be translated in your angular expressions. Instead of what you have, use something like

<button mat-raised-button style="width: 100%;" type="submit" color="primary" [disabled]="loading">
  <ng-container *ngIf="loading" i18n>Cargando Módulo...</ng-container>
  <ng-container *ngIf="!loading" i18n>Ingresar</ng-container>
</button>

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}