CODEWITHSUNDEEP
angularngx-translate
Michael
Michael

Reputation: 3238

Using routes for links in ngx-translate

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

Upvotes: 9

Views: 5660

Answers (3)

Jaya
Jaya

Reputation: 41

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>!"

Upvotes: 4

hmartini
hmartini

Reputation: 138

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

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

Upvotes: 0

Armen Vardanyan
Armen Vardanyan

Reputation: 3315

Try this:

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

And in your JSON file:

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

Upvotes: 1

Related Questions