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

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

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