Using routes for links in ngx-translate

Question

I´m using Angular 5 with ngx-translate for i18n. Now I´ve the following issue and found no solution so far:

Template:

Please <a routerlink="/signup">Signup now</a>!

Now this string should be translated via the translation json files. But routerlink is not parsed:

Json language file:

"signin": "Please <a routerlink="/signup">Signup now</a>!"

I found a workaround by splitting the sentence in three parts, but that´s not a convenient method cause it might happen that three parts doesn´t match the sentence structure (depending on the language).

Is there another way of resolving this issue?

Thanks & best, Michael

Megasporangium

Hi @Michel, Have you fond solution for this issue? I'm facing the same issue. – Servomechanical

Answer 1

I was facing the same issue. Since 'routerLink' is a directive in angular it's not rendered, but 'href' is an attribute of a tag and it will be parsed. It's not an ideal solution as 'href' would cause the entire app to reload whereas 'routerLink' navigates without reloading the page and the component is rendered in place of router-outlet. But it's a workaround and works nonetheless.

Template:

<p [innerHtml]="'signin' | translate"></p>

JSON language file:

"signin": "Please <a href="/signup">Signup now</a>!"

Elliott

This is nearly very good. Agrrrrrrrrrrrrrrrrrrrrrrrrrr – Snowwhite

Two points about using [innerHtml] is that: First) angular html sanitizer automatically sanitizes some tags and attributes. Hence, you may use <a href="#" onclick='alert("123");'">alert now</a> but onclick() disappears from the resulting html. Hence you MAY want to bypass sanitizer if there is no security risk: nguenkam.com/blog/index.php/2021/05/04/… The second) It renders after the Angular compiler has kicked in. Hence, you don't have angular abilities like routerlink here. only js css , and html works in this stage – Fishman

Answer 2

Try this:

<p [innerHtml]="{{ 'withLink' | translate }}"></p>

And in your JSON file:

"signin": "Please <a routerlink="/signup">Signup now</a>!"

Zamora

I tried that on Angular 11 and ngx-translate 13. It doesn't work. The routerlink in the anchor does not get rendered – Biannual

Answer 3

If you use property-binding, then you can't use interpolation.

[property]="some logic"
attribute="{{ some logic }}"

Groggy