According to Angular.io, the i18n tag is used to mark translatable content. It should be placed on every element tag that requires translation of fixed text.
Now, what if we have an element with dynamic content? For example, consider a table displaying a list of assets. The "Description" column may need to be in English sometimes and another language at other times.
<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 considered using this solution:
<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>
However, it turned out to be inaccurate. Do you have any suggestions?