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

javascript angularjs translation angular-translate
MattTanner picture MattTanner · Dec 5, 2014 · Viewed 7.3k times · Source

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!

Answer

Umang Patwa picture Umang Patwa · May 16, 2019

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

Related questions

"Thinking in AngularJS" if I have a jQuery background?

Suppose I'm familiar with developing client-side applications in jQuery, but now I'd like to start using AngularJS. Can you describe the paradigm shift that is necessary? Here are a few questions that might help you frame an answer: How do …

Read More
AngularJS passing data to $http.get request

I have a function which does a http POST request. The code is specified below. This works fine. $http({ url: user.update_path, method: "POST", data: {user_id: user.id, draft: true} }); I have another function for http GET and …

Read More
Insert HTML into view from AngularJS controller

Is it possible to create an HTML fragment in an AngularJS controller and have this HTML shown in the view? This comes from a requirement to turn an inconsistent JSON blob into a nested list of id: value pairs. Therefore …

Read More