Geek Answers Handbook

Add <strong> / bold text in line feed using angular -translate

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

my json language file looks like this:

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

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

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

RESULT: "blah blah blah"

As a result, I am looking for "blah blah blah"

I could divide this into several translation keys, but a specific translation consists of several bold words in several sentences ... and I was told to try to keep the keys to translation to a minimum, since we have a couple of hundred in this project.

I tried putting bold HTML tags surrounding the font, I want to be bold (knowing that this will not work) and no ... it does not work! I also looked through the angular -translate API and could not find what I was looking for.

Any input will be wonderful!

+7
javascript angularjs translation angular-translate
source share
2 answers

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

Json file

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

HTML file (corner template)

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

The output will be-

blah blah blah

0
source share

translation compilation

Here is an example, I tried using html tags and also using directives in the translated string.

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

 <span translate="FOO" translate-compile></span>
-one
source share

More articles:


All Articles