Core: Translate html code

[hakalb]

I have html code inside my json file

{ "contactEMailDescription": "Contact <a href='mailto:{{value}}@foo.bar'>{{value}}</a> for more information" }

My html template
<div class="panel-footer"><small>{{ 'contactEMailDescription' | translate:{value:'info'} }}</small></div>

The outcome is not treated as html syntax, just as plain text.

Contact <a href='mailto:[email protected]'>fibi</a> for more information

when I would like it to look like:
Contact fibi for more information

Is it not possible to add html code inside the translate json file?

[ocombe]

It is, but you're outputing the translation as text. If you want html you should do that:

<div class="panel-footer"><small [innerHTML]="'contactEMailDescription' | translate:{value:'info'}"></small></div>

[hakalb]

I love the angular2 magic. Thanks :+1:

[quzaq]

Hi @ocombe,
I propose to add information from this thread to documentation page.
IMHO it's quite common use case and more people (including also me) may have such problem.
Anyway, great thanks for help! :)

[samgevorgyan]

Hi,
[innerHTML]="'HOME.CHANNELS_TEXT' | translate "

HOME.CHANNELS_TEXT = <div class = 'div1' > **some text** </div>

I can't attach css style from current.component.css to .div1, (.div1 { color : lime;} ) , but if i give it from main style.css its working. why?

[pawel-milewski]

Hi,
[innerHTML]="'HOME.CHANNELS_TEXT' | translate "

HOME.CHANNELS_TEXT = <div class = 'div1' > **some text** </div>

I can't attach css style from current.component.css to .div1, (.div1 { color : lime;} ) , but if i give it from main style.css its working. why?

try using
encapsulation: ViewEncapsulation.None,
on the component
it worked for me