Internationalization of dynamic content in Angular?

Question

Angular.io describes the i18n tag as follows:

The Angular i18n attribute marks translatable content. Place it on every element tag whose fixed text is to be translated.

So my question is this. What if I have an element whose content is dynamic? Take for example this below table that shows a list of assets. The column, "Description" needs to be in some cases English, and in some cases some other language.

    <table class="asset-table">
      <thead>
        <tr>
          <th i18n="@@alarm-list-timeon">Time On</th>
          <th i18n="@@alarm-list-timeoff">Time Off</th>
          <th i18n="@@alarm-list-asset">Asset</th>
          <th i18n="@@alarm-list-description">Description</th>
        </tr>
      </thead>
      <tbody *ngIf="showAssets">
        <tr *ngFor="let asset of pageItems">
          <td>{{asset.timeon}}</td>
          <td>{{asset.timeoff}}</td>
          <td>{{asset.assetlabel}}</td>
          <td i18n>{{asset.description}}</td>
        </tr>
      </tbody>
    </table>

I was thinking something like this:

    <table class="asset-table">
      <thead>
        <tr>
          <th i18n="@@alarm-list-timeon">Time On</th>
          <th i18n="@@alarm-list-timeoff">Time Off</th>
          <th i18n="@@alarm-list-asset">Asset</th>
          <th i18n="@@alarm-list-description">Description</th>
        </tr>
      </thead>
      <tbody *ngIf="showAssets">
        <tr *ngFor="let asset of pageItems">
          <td>{{asset.timeon}}</td>
          <td>{{asset.timeoff}}</td>
          <td>{{asset.assetlabel}}</td>
          <td i18n="@@{{asset.description}}">{{asset.description}}</td>
        </tr>
      </tbody>
    </table>

...but I was mistaken. Any suggestions?

Answer 1

First, the i18n value is an ID, so it would always be static.

Second, as far as translating content that changes, the only success I have had is a workaround using NgSwitch in the template.

In this example, thingStatus is your variable, and its possible values are 'good', 'bad', and 'unknown'. All of these would each be a separate translation item, with its own i18n ID value.

Obviously, this would fail if thingStatus could have an unmanageable number of possibilities.

    <div [ngSwitch]="thingStatus">
        <p *ngSwitchCase="good" i18n="status_good>Good</p>
        <p *ngSwitchCase="bad" i18n="status_bad>Bad</p>
        <p *ngSwitchCase="unknown" i18n="status_unknown>Unknown</p>
    </div>