Angular $localize internationalization with dynamic variable (using custom ID)

Question

How do I put a dynamic variable into Angular localization's translation? My team is using $localize and custom ID's under the following (highly simplified) arrangement.

travel.component.ts

export class TravelComponent {
  totalCountries = 3; // called from API
  description = $localize`:@@VISITED: User visited ${totalCountries} countries.`;
}

travel.component.html

<div i18n>{{ description }}</div>

translations.component.html

<pre i18n="@@VISITED">User visited XXXXX countries.</pre>

How do I replace XXXXX with totalCountries?

---

Failed Attempt

With this resource, I tried:

travel.component.ts

description = $localize`:@@VISITED: User visited ${totalCountries}:totalVisits: countries.`;

travel.component.html

<pre i18n="@@VISITED">User visited <x id="totalVisits"/> countries.</pre>

However, I get the error Errors parsing template: Only void and foreign elements can be self closed "x".

question from:https://stackoverflow.com/questions/65713867/angular-localize-internationalization-with-dynamic-variable-using-custom-id

Answer 1

Waitting for answers