If you want to implement this feature easily, check out the latest version of angular-translate 2.0.

<p translate="{{ 'PASSED_AS_INTERPOLATION' }}"></p>

It has worked like magic for me.

In order to properly utilize the ng-bind-html directive, it is essential to refrain from using curly braces ({{ }})

If you require information on how to configure and implement this directive (ngBindHtml), please refer to the following link: https://docs.angularjs.org/api/ng/directive/ngBindHtml

Once ngSanitize is added, the code snippet below should function correctly:

<p ng-bind-html="'add_card-title' | translate"></p>

This method is effective for me... the HTML content is nicely styled (such as bold, italics, etc.)

<p translate="translationId"></p>

However, it was also important for me to make sure that I wasn't utilizing an escape strategy during the provider setup. That caused some confusion and issues for me.

• Acceptable:

  $translateProvider.useSanitizeValueStrategy( 'sanitize' );

• Not Recommended:

  $translateProvider.useSanitizeValueStrategy( 'escape' );

Current version in use: angular-translate v2.13.1

To display the title, you can utilize the following code:

<p [innerHTML]="'add_card-title' | translate"></p>

After some investigation, I finally found the solution to my issue. Initially, I was using AngularJS v1.2.0-rc.3, which unfortunately had deprecated ng-html-bind-unsafe. Fortunately, Angular now has an alternative in the form of ng-bind-html as a replacement for ng-html-bind-unsafe. However, it is essential to inject angular-sanitize as a dependency to make it operational.

To resolve this issue, I made the following change:

<p ng-html-bind-unsafe="{{'add_card-title' | translate}}"></p>

I replaced it with:

<p ng-bind-html="'{{'add_card-title' | translate}}'"></p>

And miraculously, everything started functioning smoothly once again.

There are numerous techniques available for incorporating HTML into your code, including working with scope variables and implementing features like ng-click in HTML translations:

http://plnkr.co/edit/OnR9oA?p=preview

<div>{{'TESTING1_SIMPLE_VAR_REPLACE' | translate: '{name: "John Smith", username: "john.smith12"}'}}</div>
<div translate='TESTING1_SIMPLE_VAR_REPLACE' translate-values='{ name: "Jake Smith", username: "jake-smith-101"  }'></div> 
<div translate="TESTING1_SIMPLE_VAR_REPLACE_NA" translate-value-name="{{name}}" translate-value-username="{{username}}" translate-default="Hello {{name}} ({{username}})"></div>

<br/><br/>
<div>{{'TESTING1_SIMPLEHTML' | translate}}</div><!-- doesn't compile the html -->
<div translate="TESTING1_SIMPLEHTML" translate-default='DEFAULT(not used since there is a translation): This <b>translation</b> has a <a href="http://google.com" target="_blank">link</a>.'></div><!-- this and below compile the html -->
<div translate="TESTING1_SIMPLEHTML_NA" translate-default="DEFAULT(used since translation not available): This <b>translation</b> has a <a href='http://google.com' target='_blank'>link</a>."></div>
Uses ng-bind-html and sanitize: <div ng-bind-html="'TESTING1_SIMPLEHTML' | translate"></div>


<br/><br/>
<div translate="TESTING2_SCOPE" translate-values="{timer: timer}" translate-default="DEFAULT(not used since there is a translation): Seconds: <a href='http://google.com' target='_blank'>{{timer}} seconds</a>."></div>
<div translate="TESTING2_SCOPE" translate-value-timer="{{timer}}"></div>
<div translate="TESTING2_SCOPE_NA" translate-default="DEFAULT(used since translation not available): Seconds: <a href='http://google.com' target='_blank'>{{timer}} seconds</a>."></div>

<br/><br/>
<div compile-unsafe="'TESTING3_COMPILE' | translate"></div><!-- old way to do before angular 2.0-->
<div translate="TESTING3_COMPILE" translate-compile></div>
<div translate="{{'TESTING3_COMPILE_SCOPE'}}" translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div> <!-- not sure of advantage of this style, but saw an example of it -->
<div translate="TESTING3_COMPILE_SCOPE"       translate-compile translate-value-name="{{name}}" translate-value-username="{{username}}" ></div> 
<div translate="TESTING3_COMPILE_SCOPE"       translate-compile translate-values='{ name: "Jake Smith", username: "jake-smith-101"  }' ></div>

AngularJS default behavior is to escape and encode the code it displays to ensure safety. To prevent this, you must specify to Angular which strings should not be escaped. In older versions prior to AngularJS 1.2, developers could achieve this by using ng-bind-html-unsafe. However, in AngularJS 1.2, this method has been deprecated.

In order to use HTML tags within strings in AngularJS 1.2 and later, you will need to download the angular-sanitize module and add it to your application dependencies.

If a string contains HTML code that needs to be displayed, utilize ng-bind-html, which automatically applies $sanitize. For example:

ng-bind-html="'add_card-title' | translate"

For further information:

Read more on Medium

Visit AngularJS Documentation

"footer_message": "All rights reserved • 2018 • My Corporation • Powered by <a href=\"http://www.mycorporation.com\">My Corporation™</a>"
...
$translateProvider.useSanitizeValueStrategy('escape');
....
app.filter('trustedText', ['$sce', function($sce) {
    var container = document.createElement('div');
    return function(content) {
        container.innerHTML = content;
        return $sce.trustAsHtml(container.textContent);
    };
}])
....
<span ng-bind-html="'footer_message' | translate | trustedText"></span>

After testing out multiple solutions, I found that neither of them were effective in version 1.0.7. For those using versions prior to 1.2, the following method may be helpful:

<p ng-html-bind-unsafe="'add_card_title' | translate"></p>

To implement innerHtml, you can use the following code example:

<div [innerHtml]="'lorem.ipsum' | translate"></div>