Is there a way to translate bindings with Angular native internationalization mechanisms?

Question

Problem

I'm implementing translations for my Angular 6 application. It needs to support static texts of the app in multiple languages. I don't need dynamic translations during runtime - I just need producing an app with texts in a language chosen during build.

Angular has the whole page on internationalization, but it focuses solely on situations where all the texts are hard coded in the templates, like in the code below:

<p>This is a hard coded text</p>

That's hardly a situation in my template. Additionally it seems to me impossible or extremely dirty to write the whole application with all the texts hard-coded in templates, so if that's the only mechanism available for translation, then it seems completely useless to me.

In my components I very often have texts bound to some JavaScript variables (or to be precise object properties), like in the code below:

<li *ngFor="let navigationEntry of navigationEntries">
  <a [href]="navigationEntry.url">
    {{ navigationEntry.text }}
  </a>
</li>

Let's say the variable is still static, just being stored in the component or a service, e.g.:

navigationEntries: Array = [
  {
    url: "/",
    text: "Home",
  },
  {
    url: "/login",
    text: "Login",
  },
  {
    url: "/admin",
    text: "Admin panel",
  },
];

Question

Is there a way to use Angular native translation (internationalization) mechanisms to translate the anchor texts (or actually the text properties of the navigationEntries members) during build time? The structure of the JavaScript data and the HTML of the template can change.

If Angular native internationalization mechanisms can't handle that (but then I wonder what's their use at all), then what are other solutions that could help with implementing such translations? I found ngx-translate library, but it's providing translations which can be dynamically changed at runtime and ideally I wouldn't like to add that unnecessary overhead of dynamic solution watching on all the translated texts.

Answer 1

Yes, you can use Angular native translation mechanim to do this. We use the following pattern a lot to get around the missing dynamic translations in angular i18n:

You have an array of messages, and then use it with ngFor and ngSwitch to template the messages, something like this for your example:

<li *ngFor="let navigationEntry of navigationEntries">
  <ng-container [ngSwitch]="navigationEntry.text">
    <a [href]="navigationEntry.url" *ngSwitchCase="'Home'" i18n="@@home">
      Home
    </a>
    <a [href]="navigationEntry.url" *ngSwitchCase="'Login'" i18n="@@login">
      Login
    </a>
    <a [href]="navigationEntry.url" *ngSwitchCase="'Admin panel'" i18n="@@adminPanel">
      Admin panel
    </a>
  <ng-container>
</li>

It's somewhat verboose - but it works for a surprising amount of use cases.

Note, the i18n id (the string following the @@) is just an unique id, which is used in the xlf translation file. The string can be anything, I use the message itself, if possible, for readability and reuse.