Search code examples
javascriptangularjstranslationangular-translate

Adding <strong>/bold text in translated string using angular-translate

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!

Solution

  • 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