20

I am currently look for a solution to put ONE bold word in a string being translated by the angular-translate filter. Sample code below: (I'm sure the solution is simple... I just can't seem to figure this one out!)

my language JSON file looks like so:

"AUTHENTICATE-ENTER-CODE": "blah blah blah"

In my html file I have this (which translates correctly according to key:value):

{{'AUTHENTICATE-ENTER-CODE' | translate}}

RESULT: "blah blah blah"

The result I am look for is "blah blah blah"

I could split this into multiple translation keys but the particular translation consists of multiple bold words in a few sentences... and I was told to attempt to keep the translations keys to a minimum since we have a couple hundred in this project.

I have tried putting the bold HTML tags surrounding the font I want to be bold (knowing it wouldn't work anyways) and no... it does not work! I also browsed through the angular-translate API and couldn't find exactly what I was looking for either.

Any input would be great!

MattTanner
  • 296
  • 1
  • 4
  • 12

2 Answers2

30

If you using i18n or any other JSON file for content in Angular 2+ versions.Use this

Json File

"TextWithHtmlExample": "blah <b>blah</b> blah"

Html File (Angular Template)

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

Output Will be-

blah blah blah

Umang Patwa
  • 2,795
  • 3
  • 32
  • 41
-1

translate-compile

Here is sample, I have tried to use html tags and as well as using directives in the translated string.

http://jsfiddle.net/walvekarnikhil/0j7pd40b/

<span translate="FOO" translate-compile></span>
Nikhil Walvekar
  • 510
  • 3
  • 9
  • 1
    `translate-compile` doesn't actually do this (and in fact it is set to true by default). The reason your jsfiddle works is because you don't set the sanitize strategy for `$translateProvider`, so angular-translate doesn't escape any HTML. This is also very unsafe and angular-translate warns you about this in the console. – NeuroXc Sep 27 '16 at 18:05
  • @NeuroXc that's right, translate-compile is not solving the problem. – Nikhil Walvekar Oct 18 '16 at 04:40