Angular Translate HTML tags

Question

I know this has been asked here before but none of the answers seem to work for my case

I bought this theme Angle which is working with Angular 1.4.2 and Angular translate 2.6.0 (even updated to last 2.7.2)

The template by default has the Translate module on it

This is the config file

  $translateProvider.useStaticFilesLoader({
      prefix : 'app/i18n/',
      suffix : '.json'
  });
  $translateProvider.preferredLanguage('es');
  $translateProvider.useLocalStorage();
  $translateProvider.usePostCompiling(true);
   // Enable escaping of HTML
  $translateProvider.useSanitizeValueStrategy('sanitize'); // I added this line based on Docs wasn't before

And the translation files in JSON format

  {
   "page": {
    "PAGES_WELCOME" : "Welcome to <br> MY APPLICATION, HEY THERE IS A BR TAG BEFORE ME"
  },

  "login": {
    .
    .
    .
    .
  },

But i cannot add HTML tags inside the text, on the JSON file, instead of getting

Welcome to MY APP

I'm getting

Welcome to < br > MY APP

How can i fix this?

EDIT

I do NOT want to remove the tags, my JSON file is modified by the backend, and it can and will contain HTML Tags, i want those tags to work on the output.

JADE Example Where the content is binding

div(class="col-lg-4 col-md-4 col-sm-4 col-xs-12 footer-left")
  p(class="text-center") 
    {{ 'page.PAGES_WELCOME' | translate }} 

Solution 1

Angular sanitizes any html strings during its interpolation. In order to get around this you will need to mark the HTML as safe in $sce before injecting. Then also use ngBindHtml to output the html.

I've not used angular-translate before, but this may work:

//app is the main module
app.filter("htmlSafe", ['$sce', function($sce) {
    return function(htmlCode){
        return $sce.trustAsHtml(htmlCode);
    };
}]);

//then to output it
<span data-ng-bind-html="'page.PAGES_WELCOME' | translate | htmlSafe"></span>

Solution 2

You can keep your JSON file as it is, and then simply use the innerHTML attribute in the HTML to render your text like so:

 <div [innerHTML]="'page.PAGES_WELCOME' | translate"></div>

Solution 3

Install ngSanitize module.

It makes you able to bind html content, then change your code like this:

ng-bind-html="'a_key_with_html' | translate"

Solution 4

Tested with AngularJS 1.4.7, I just use this:

<span data-ng-bind-html="'my.i18n.code.to.translate.html.tags' | translate"></span>

Since I do not want to inject any filter but above is just worked on my own trusted i18n string. Of course, the accepted answer would be more safe but this one is just work right away.

Solution 5

I actually really don't want to use the tags in my html template. The tags isn't meaningful.

I finally got it to work. Environment: Angular 1.5.8, angular-tranlsate: 2.11.0

My solution is: 1. load ngSanitize and init the module

2. $translateProvider.useSanitizeValueStrategy('sanitize');

3. <p ng-bind-html="'Please <strong>refresh</strong> the browser' | translate"></p>

View more solutions

Comments

[DJG22]

This is not what i'm asking for, i want the line to break but angular is printing <br> within the line.

[IfTrue]

@DannyG - Yes you are not asking it now because you just changed your question :) You are going to have to show where the PAGES_WELCOME variable is called for us to be able to know.

[DJG22]

I didn't changed the question, the <br> Tag was being interpreted by the editor and added the line break, i just wanted to show the output, PAGES_WELCOME is irrelevant, just for the example purpose. It could be a single string without vars and still the HTML tags get printed on the screen

[IfTrue]

@DannyG - it is completely relevant how you are displaying the string to be able to explain why it is not allowing the <br>. My hunch is your added sanitization is stripping any code from strings that can be altered to prevent malicious inserts but that is a hunch - I can tell you for sure if you show the code necessary.

[DJG22]

at first the sanitize service wasn't (I added it after reading the docs) and it wasn't working back there either.

[DJG22]

Had another function to make it HTML Safe but the ng-bind-html did the trick, thanks!

[masterFly]

Only having ng-bind-html (without htmlSafe filter) did the trick for me! Thanks!

[Rikki]

This worked for me. I think this is the most recent (at time of writing) way of binding to the innerHTML and side-stepping the HTML escaping that Angular's templating provides by default.

[Ali Ben Messaoud]

The answer of @AElMehdi is short and efficient, I vote for @AElMehdi!

[DJG22]

@AliBenMessaoud this question was posted 6 years ago, I doubt I could wait 4 years for his answer to pop-up

[Razze]

This won't let you access css classes unless you set view encapsulation to none