'angular-i18n Angular 6 Internationalisation : How to deal with variables

I've read the entire doc here : https://angular.io/guide/i18n

I can't make heads or tails of how I'm supposed to handle a html tag of this nature :

<div i18n="@@myId" class="title-text">{{currentPage}}</div>

or one like this :

<div i18n="@@myId" class="title-text" [innerHTML]="currentPage"></div>

it doesn't mention any variable text at all as if they just assume we'd have all our names and text hard coded into the html.

a language file is supposed to look like this :

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="myId" datatype="html">
        <source>Hello</source>
        <target>Bonjour</target>
      </trans-unit>
    </body>
  </file>
</xliff>

Am I to do something like this to handle the multiple possibilities of the var?

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="en" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="myId" datatype="html">
        <source>Title 1</source>
        <target>Titre 1</target>
        <source>Help 2</source>
        <target>Aide 2</target>
        <source>New 3</source>
        <target>Nouveau 3</target>
      </trans-unit>
    </body>
  </file>
</xliff>

I don't think that'll work. How do I handle variables?

UPDATE :

if I use their language file generation tool :

ng xi18n --output-path locale --out-file english.xlf --i18n-locale fr

I get :

<?xml version="1.0" encoding="UTF-8" ?>
<xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
  <file source-language="fr" datatype="plaintext" original="ng2.template">
    <body>
      <trans-unit id="9f3e56faa6da73b83f4646a1e074b970891894da" datatype="html">
        <source><x id="INTERPOLATION" equiv-text="{{currentPage}}"/></source>
        <context-group purpose="location">
          <context context-type="sourcefile">app/logged.in/top.bar/top.bar.component.ts</context>
          <context context-type="linenumber">85</context>
        </context-group>
        <note priority="1" from="description">the title of the current route</note>
      </trans-unit>
    </body>
  </file>
</xliff>

pretty sure equiv-text="{{currentPage}}" is garbage. but It may yet work need to test. in the meantime I can't get ng serve to accept the new configs.

UPDATE AGAIN :

to get ng serve --configuration=fr to work

you have to edit angular.json further, it's not specified in the official docs but they do talk about it here : https://github.com/angular/angular-cli/wiki/stories-internationalization

Well I added a <target>Title</target> and it works but of course this implies that right now every single value for the var returns "title" no matter what.

also upon placing the i18n tags everywhere, I ran into this in my code :

 <dropzone [message]="valid? '' : 'Placez ici votre fichier Excel csv à Ajouter aux lignes ci-dessous. (Ces lignes apparaîtront à la fin de la table)'" (success)="uploaded()"></dropzone>

so what now? how do I translate the message passed to the dropzone?

angular angular-i18n

Solution 1:^[1]

Given the official instructions "translating-plural-and-select-expressions", (overview) can't you do ? :

<div class="title-text" i18n>{currentpage, select, title1 {title1} title2 {title2} unknowntitle {unknowntitle}}</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'angular-i18n Angular 6 Internationalisation : How to deal with variables

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]