CODEWITHSUNDEEP
javascripthtmljsonangularjsangular-translate
DJ22T
DJ22T

Reputation: 1640

Angular Translate HTML tags

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 }}

Upvotes: 19

Views: 41192

Answers (6)

AElMehdi
AElMehdi

Reputation: 592

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>

Upvotes: 19

Bing Wu
Bing Wu

Reputation: 437

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

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

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

Upvotes: 2

Serdar D.
Serdar D.

Reputation: 3391

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"

Upvotes: 3

Osify
Osify

Reputation: 2295

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.

Upvotes: 2

LessQuesar
LessQuesar

Reputation: 3193

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>

Upvotes: 20

IfTrue
IfTrue

Reputation: 543

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

MY APP

You have a <br> which is breaking the line like you said you do not want so remove it like so:

{
   "page": {
    "PAGES_WELCOME" : "Welcome to {{appName}}"
  },

  "login": {
    .
    .
    .
    .
  },

Upvotes: 1

Related Questions