Core: [Question] How to include html tags in your translation strings

[amandala]

I am loving the ng2-translate package, but I cannot seem to figure out how to include tags like for formatting and for including inline links. The only way I can make it work is by chunking out a sentence into a number of sections surrounding the tags. I have searched high and low for an example and would love some clarification on implementation.

Cheers :)

[koodikindral]

Same question :)

[amandala]

@knalli referred me to this documentation for escaping html in translate strings which seems to indicate that it cannot be done without opening the app up to XSS attacks.

Is there no way to easily include html tags in translate strings? The following simply creates an empty paragraph tag.

"withSpan" : "Here is some text <span>with a span</span> for formatting"
<p translate="withSpan"></p> // creates empty p tag

{{ "withSpan" | translate }} // outputs markup as plain text

[Bouzmine]

Try using this

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

[phiphou]

If we do

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

we get an error:

Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{ 'withSpan' | translate }}]

Change to

<p [innerHTML]="'withSpan' | translate"></p>

make it works ;)

[ocombe]

yes, if you're using [ ] to define a property, then don't use {{ }}

[Habeeb-mohamed]

@phiphou This binding not working in IE 11 :(

[El-Tee-E]

We have the same issue as @ocombe - the innerhtml does not work in IE11:

shows a translated text but with the html as text, not rendered html. Also for some reason it shows the text twice.

Ex.

"title": "Hello from this <strong>world</strong>"

{{'title' | translate}}

Result in IE 11:

Hello from this <strong>world</strong>Hello from this <strong>world</strong>

Expected result (and result in other - not crappy - browsers):

Hello from this world

We are experiencing this bug in our ng4.1 project.
Worse part is that stats show IE 11 is 2nd most used browser by our users.

Will this issue be addressed (or is there a workaround)?

[simong]

@El-Tee-E: Make sure that you're outputting HTML. See @ocombe's comment on an older ticket.

Don't do:

<span translate="title"></span>

but rather do:

<span [innerHTML]="'title' | translate"></span>

(This ticket was the first result on Google when searching for allowing HTML in translation values and thought I'd clarify it in case other people would miss the posted solution in the other ticket.)

[EOussama]

If we do

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

we get an error:

Parser Error: Got interpolation ({{}}) where expression was expected at column 0 in [{{ 'withSpan' | translate }}]

Change to

<p [innerHTML]="'withSpan' | translate"></p>

make it works ;)

But that discards any styling you had on it.

[andzejsw]

None of above answers is correct, cause doesn't work with translate params!!!

[vixncu]

@andzejsw this works for me using translate params

translate.json:

"password": {
    "title": "Password for [<strong>{{username}}</strong>]"
}

component.html:

<h2 [innerHTML]="'password.title' | translate: {username: account.login}"></h2>

[masonmark]

The answer by @deviancu worked for me, and it worked on Microsoft Internet Explorer 11 (version 11.535.18362.0).

Also, both the translation ID and translation parameters may be properties of the component/controller instead of being strings hardcoded in the template, e.g.:

<span
  *ngIf="shouldShowFoo"
  [innerHTML]="fooTranslationId | translate: fooTranslationParameters"
  [class]="fooClassAttributeValue"
></span>

[nawaz-pasha]

I have a use case one level up of what is discussed here. I need to have a click event for a part of the translated text.

translate.json:

{
    "title": "Welcome aboard! <span (click)="callSomeMethod()">Click here</span> for more info"
}

component.html

<h2 [innerHTML]="'title' | translate"></h2>

component.ts

callSomeMethod() {
    // do something
}

[N4G1B4T0R]

I have a use case one level up of what is discussed here. I need to have a click event for a part of the translated text.

translate.json:

{
    "title": "Welcome aboard! <span (click)="callSomeMethod()">Click here</span> for more info"
}

component.html

<h2 [innerHTML]="'title' | translate"></h2>

component.ts

callSomeMethod() {
    // do something
}

I figure out this issue like this:
here we got a translation and I added a class:

{
    "title": "Welcome aboard! <span class="some-name" (click)="callSomeMethod()">Click here</span> for more info"
}

then in html I added a function:

<h2 click="callSomeMethod($event)" [innerHTML]="'title' | translate"></h2>

And in the component you can check a class via event

callSomeMethod(e) {
    if (e.target.classList.contains('some-name')) {
    // do something
    }
}

I guess, it will help you to solve your issue.

[skb0110]

I have a use case one level up of what is discussed here. I need to have a click event for a part of the translated text.

translate.json:

{
    "title": "Welcome aboard! <span (click)="callSomeMethod()">Click here</span> for more info"
}

component.html

<h2 [innerHTML]="'title' | translate"></h2>

component.ts

callSomeMethod() {
    // do something
}

@nawaz-pasha , How did you solve this problem, Could you please help me on this. I am trying to implement the same thing.
Thanks.

[nawaz-pasha]

@skb0110 try the approach described by @N4G1B4T0R . It works perfectly.

[skb0110]

Thanks a lot @N4G1B4T0R and @nawaz-pasha , After minor correction the above code is working properly.
Exact and corrected code of above code as follows,
translate.json:

{
    "title": "Welcome aboard! <span class='some-name' (click)='callSomeMethod()'>Click here</span> for more info"
}

In HTML add click function:
<h2 (click) = "callSomeMethod($event)" [innerHTML]="'title' | translate"></h2>
And in the component you can check a class via event

callSomeMethod(e) {
    if (e.target.classList.contains('some-name')) {
    // do something
    }
}