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

Question

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!

"AUTHENTICATE-ENTER-CODE": "blah <b>blah</b> blah" doesn't work? — Aniket Sinha
– Aniket Sinha, Commented Dec 5, 2014 at 18:56
Possible duplicate of How to handle strings containing HTML using Angular-Translate? — Overdrivr
– Overdrivr, Commented Oct 16, 2016 at 19:13

Umang Patwa · Accepted Answer · 2019-05-16 08:09:22Z

34

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

answered May 16, 2019 at 8:09

Umang Patwa

2,9754 gold badges35 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MightGod Over a year ago

awesome solution

Nikhil Walvekar · Accepted Answer · 2015-05-01 05:10:45Z

-2

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>

answered May 1, 2015 at 5:10

Nikhil Walvekar

5083 silver badges9 bronze badges

2 Comments

NeuroXc Over a year ago

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.

Nikhil Walvekar Over a year ago

@NeuroXc that's right, translate-compile is not solving the problem.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related