Allow the use of element refs in translation variables

[duncte123]

Current behavior

Currently ngx-translate does not support this feature and will call toString on the element ref causing it to render as [object Object]

Expected behavior

With the following translation keys

{
  "schedule": {
    "startsIn": "Begins {{start-time}}"
  },
}

Vue allows us to do the following ($formatTime is a custom function defined by me)

<i18n path="schedule.startsIn" tag="span">
    <template #start-time>
        <time :datetime="startTime">{{ $formatTime(startTime) }}</time>
    </template>
</i18n>

This will render as the following

With the HTML rendering as

<span>Begins <time datetime="2023-05-12T13:00:00Z">15:00</time></span>

What is the motivation / use case for changing the behavior?

The main use case for this is accessibility. Inserting the time element allows computers (such as search engines) to read and use the time properly, or allows your phone to detect it and set a reminder. (MDN docs)

Besides that, it's also safer when it comes to links for example. While using [innerHTML] is fine for allowing links it is also very susceptible for bad actors to inject scripts this way for community-translated projects. (that is a bit of a reach tbh)

Over all, it is just really nice to not make your translators deal with HTML but just have them deal with the translation strings and the front-end code being responsible for adding in the appropriate HTML tags.

How do you think that we should implement this?

I think taking inspiration from vue-i81n would be a good idea and create something like this.

<ngx-translate path="schedule.startsIn" [translateParams]="{'start-time': startTimeTemplate}">
    <ng-template #startTimeTemplate>
        <time [dateTime]="startTime">{{ $formatTime(startTime) }}</time>
    </ng-template>
</ngx-translate>

Or, alternatively, just add support for element refs inside the params where it just takes the contents of the referenced element and dumps that in place of the variable. This would look something like this.

<span [innerHTML]="'schedule.startsIn' | translate: {'start-time': startTimeTemplate}"></span>
<ng-template #startTimeTemplate>
    <time [dateTime]="startTime">{{ $formatTime(startTime) }}</time>
</ng-template>