Complex binding with i18n

I have a simple custom component text-input

  <input type="text" class="form-control" disabled.bind="disabled" value.bind="value" placeholder.bind="label">

which I use as follows:

<text-input value.bind="model.voyageNumber" t="[label]voyage-number"></text-input>

The problem I’m having is that I’m trying to bind to

"voyage-number":"Voyage &numero;"

If I use t="[label]voyage-number;[html]voyage-number" the innerhtml overwrites the <input/>.

I’ve tried all combinations I can think of - changing the order of [label] and [html] all to no avail.

Is this possible to do?

Thanks in advance

1 Like

Is label declared as a bindable property? Can you show the VM of text-input?

1 Like

Is there a specific reason to translate in the call of the custom element instead of in the label element?
Or perhaps use label.bind="‘voyage-number’ & t" within the custom element call.

1 Like

It was because sometimes the translation takes parameters. In any event I replaced all references to &numero; with № which seems to work just fine


I wonder whether escapeHtml would have helped

1 Like
export class TextInput {
  @bindable({ defaultBindingMode: bindingMode.twoWay })  public value: string;
  @bindable public label: string;
  @bindable public disabled = false;

  protected bind() {
    this.disabled = trueFalse(this.disabled);

I’ll try the escapeHtml and report back

I would add that the component works fine for t="[label]regular-text"

1 Like

Doesn’t seem to work …

1 Like

Thanks for the reply and checking it out

1 Like

Sorry that I’m coming back to this again, but I think there needs to be a mechanism where you can apply the [html] attribute together with a custom attribute [mylabel].

The dox give these two examples

  <input t="[placeholder,aria-placeholder]placeholder">
  <span t="[html]title;[class]title-class">Title</span>

In the second example [html] is applied to one property and [class] is applied to another property.

I want to apply [html] to the custom property [label] on the element.

something like

<custom-element t="[html,label]title"></custom-element> (example syntax)

where title looks like:

title: hello <strong>Aurelia</strong>

Any chance someone could take a look at this or suggest a work-around?

At the moment I’m breaking my translations down into very small parts which is cumbersome to say the least

  <span t="title-hello"></span>
  <strong t="title-name"></strong>

On long pieces of text, you can imagine how ugly this gets!

1 Like

I’m still not entirely sure what exactly you’re trying to achieve nor where the potential issue could be. So please if you could create a fresh new cli project showing the total minimum with the expected outcome I’m sure we can find a solution. The smaller and isolated the sample the easier it will be to get the use case

1 Like

Hi. I’ve just put a minimum project at

Hopefully it clarifies what I’m trying to achieve

1 Like

@jeremyholt I would say that it might be easier to change the <label>${label}</label> to <label innerhtml.bind="label"></label> . And then you can have t=[label]key at the place of usage.


1 Like

Excellent - I hadn’t thought of that!

1 Like

That was exactly what I had in mind and the example clarified. Thx @jeremyholt

1 Like

Started updating all my custom components to innerhtml.bind=“label”.

Works a treat!

Many thanks to everyone for their help

(Perhaps this could be included somewhere in the dox??)

1 Like

Oops - spoke too soon

How would I bind the innerhtml for placeholder ?

  <div class="form-label-group">
    <input type="email" disabled.bind="disabled" class="form-control" value.bind="value" placeholder.bind="label">
    <label innerhtml.bind="label"></label>
1 Like

a placeholder cannot render html as far as I know

1 Like


Actually correct substitution for ${label} should probably be

<label innerhtml.bind="label | santizeHTML"></label>

More on that: Vulnerability Disclosure Contact

1 Like

Oh - thanks for that.

Question - I am in total control of what is going into the innerhtml.bind - i.e. its only coming from my translation files. Do I really need to sanitize the input?

1 Like