Ross_ Ross_ - 1 month ago 27
AngularJS Question

Angularjs bootstrap tabset tab heading

I am wondering whether it is possible to write html inside an angularjs bootstrap tabset tab heading. I am trying to add a svg inside the title. I have created a quick snippet in plunker to try and demonstrate the issue I am having.

<tabset>
<tab heading="<span>hello</span><em>1</em>">One</tab>
<tab heading="Two">Two</tab>
<tab heading="Three">Three</tab>
</tabset>


http://plnkr.co/edit/qFsFGDNUIJj9nIF51ApU

any ideas?

thanks

Answer

You should be using the tab-heading element within the tab element if you want HTML within the heading (as shown in the example in the docs):

<tabset>
  <tab>
    <tab-heading>
      <span>hello</span><em>1</em>
    </tab-heading>
    One
  </tab>
  <tab heading="Two">Two</tab>
  <tab heading="Three">Three</tab>
</tabset>

Updated plunker here.

Comments