Clever Geek Handbook

How to add an icon on a tab in angular js>

Hi i am new to angular js,

My question is how to add an icon to a tab in angular js? This is what I have so far:

<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
  <tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
  <tab heading="Tab 2 ded">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
</tabset>

I add <tab heading="Tab 2 ded <span class="icon-print">print</span>">

but it shows whatever is written inside the header instead of displaying the range as I would look.

Please help me.

+3


source to share


3 answers


I am assuming you are using angular-ui bootstrap. Use the directive tab-heading

and put your icon there.



<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
  <tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
  <tab>
    <tab-heading>
      <i class="icon-print"></i> Tab 2 ded
    </tab-heading>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
</tabset>
+13


source


I fixed my problem using this:

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
      {{tab.content}}
    </tab>
    <tab select="alertMe()">
      <tab-heading>
        <i class="glyphicon glyphicon-bell"></i> Alert!
      </tab-heading>
      I've got an HTML heading, and a select callback. Pretty cool!
    </tab>
  </tabset>


more on this for this link

+1


source


For some reason, I got the following error using tab-heading

as suggested above:

'tab-heading' is not a known element

Although the tab works fine and the tab directive is present in my local library. The documentation offers the following example:

<tab (select)="alertMe()">
  <template tabHeading>
    <i class="glyphicon glyphicon-bell"></i> Alert!
  </template>
  I've got an HTML heading, and a select callback. Pretty cool!
</tab>

This worked for me. Maybe because of a different version? Or some dependency or declaration is missing. Feel free to correct me or improve this answer.

0


source






More articles:


All Articles