Translations with links/html in it are no good

[Nasicus]

Sometimes we have the problem, that the text to translate contains a link or other HTML stuff.
Our current solution is then to split the translations in two parts.
However not all languages work the same way and for translators it's then often almost impossible to provide a suitable solution.

An example (file wallet-import.html):

{{ 'WALLETS_PAGE.OR_TYPE' | translate }} <a (click)="openWalletImportPassphrase()" tappable>{{ 'WALLETS_PAGE.SECRET_PASSPHRASE' | translate }}</a>

In german this is almost impossible to translate, so it makes sense and looks good.

I searched for a solution and found this:
ngx-translate/core#223 (comment)

I personally think this is easy and makes sense, for the example above this could look like this:

  {{ 'WALLETS_PAGE.OR_TYPE_PASSPHRASE' | translate | translateCut:0 }}
  <a (click)="openWalletImportPassphrase()" tappable>{{ 'WALLETS_PAGE.OR_TYPE_PASSPHRASE' | translate | translateCut:1 }}</a>
  {{ 'WALLETS_PAGE.OR_TYPE_PASSPHRASE' | translate | translateCut:2 }}

And the translations would look like this:

English:
or type your |secret passphrase|

German:
oder gib deine |geheime Passphrase| ein

With this it should be possible for all languages to translate something like this properly plus it's still safe from any injection stuff and still (hopefully :P) not too hard for the translators.

[ItsANameToo]

I thought that you should be able to use placeholders in the translation strings (scroll down a bit to the "translate sentence with variables" part)? Then you can simply use oder gib deine {{ passphrase }} ein, but I haven't tried this out myself.

Edit: on further inspection; this approach might not be very suitable for your case with the HTML elements 😛 , so your suggestion would be better

[Nasicus]

Yes you got it.
We already use placeholder in a lot of places.
But for HTML they are not good, we'd need to move the HTML in the placeholders and even then angular probably couldn't evaluate the onclick stuff just like that - plus it's super ugly :D