How to bind html to an external component? (Angular)

Question

We have consumed an external library with components we would like to use, one of the components is an alert modal, that is represented as so:

<alert dismissible="false">Enter your text here</alert>

It renders out:

<alert dismissible="false" initialized="true">
  <div class="alert-inside alert-type-info" aria-hidden="false" role="alert">
    <div region-container="content">
      <span>
        <span class="ng-binding ng-scope">Enter your text here</span>
      </span>
    </div>
  </div>
</alert>

The way we have built our angular app we are using config variables to hold our content

AppConfig.EnterText= "Enter your text here";

In which case we would call alert as so

<alert dismissible="false">{{AppConfig.EnterText}}</alert>

The problem is we actually want to use some html markup to be put into the alert...

AppConfig.EnterText= "<strong>Notice:</strong> Enter your text here";

In which case, if we include the content between the tags, it will render the tags instead of processing them. I have tried

<alert dismissible="false" ng-bind-html="AppConfig.EnterText"></alert>

This results in the inner tags being replaced with the content...

<alert dismissible="false" initialized="true">
   <strong>Notice:</strong> Enter your text here
</alert>

Anyone have suggestions?

Elaina · Accepted Answer · 2016-08-25 02:52:06Z

1

To solve this problem, I believe you need to use ng-bind-html directive in conjunction with the $sce service. Have you tried injecting the $sce service into your controller? Once you do that, you can set your variable like this:

AppConfig.EnterText= $sce.trustAsHtml("<strong>Notice:</strong> Enter your text here");

answered Aug 25, 2016 at 2:52

Elaina

2143 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Seth McClaine · Accepted Answer · 2016-08-25 15:59:00Z

0

I was able to resolve the issue with the following:

<alert dismissible="false">
  <span ng-bind-html="AppConfig.EnterText"></span>
</alert>

answered Aug 25, 2016 at 15:59

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

Collectives™ on Stack Overflow

How to bind html to an external component? (Angular)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related