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?
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>