Hi I am new at angular js,
my question is how to add an icon to a tab in angular js? That's 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'm adding <tab heading="Tab 2 ded <span class="icon-print">print</span>">
but it shows everything exactly as written inside the heading instead of rendering the span as I would exspect..
Please help me.
Hi I am new at angular js,
my question is how to add an icon to a tab in angular js? That's 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'm adding <tab heading="Tab 2 ded <span class="icon-print">print</span>">
but it shows everything exactly as written inside the heading instead of rendering the span as I would exspect..
Please help me.
Share Improve this question edited Jul 22, 2016 at 10:59 jlang 1,05712 silver badges34 bronze badges asked Aug 28, 2014 at 10:30 Rohit Azad MalikRohit Azad Malik 32.2k17 gold badges71 silver badges99 bronze badges3 Answers
Reset to default 14I assume you are using angular-ui bootstrap. Use tab-heading
directive 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>
I fixed my issue 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 about this go for this link
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 lib. The documentation suggests the following sample:
<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>
That worked for me. Maybe due to a different version? Or some dependency or declaration missing. Feel free to correct me or enhance this response.