Ngx-bootstrap: Adding icons and badges to tab headings?

[queejie]

I've tried a couple of ways to add icons and badges to tabs, using the heading attribute, to no avail. I'm sure this must be possible? Is there something like the equivalent of innerHTML for the tab heading?

e.g.,

[Simon-Briggs]

use ng-template and the tabHeading directive

<tabset>
  <tab heading='Tab 1'>Tab 1 content</tab>
  <tab>
    <ng-template tabHeading><i class="fa fa-star"></i>Tab 2</ng-template>
    Tab 2 content
  </tab>
</tabset>

[jayrajkachariya]

But, What if i want to change style of that "heading" ?
Is there any way to do that?

For eg. i want that star of color Red!
Is it possible to do?
I tried to add inline style at <ng-template> as well as <i> tag but nothing worked out. Please suggest something.

[smf0627]

Try:
<ng-template tabHeading><i class="fa fa-star maroon"></i>Tab 2</ng-template>

Then in your CSS:
:host >>> .maroon { color: maroon; }

[ItsAncientCoder]

use ng-template and the tabHeading directive

<tabset>
  <tab heading='Tab 1'>Tab 1 content</tab>
  <tab>
    <ng-template tabHeading><i class="fa fa-star"></i>Tab 2</ng-template>
    Tab 2 content
  </tab>
</tabset>

Hi,

in my case, the tabs are dynamically generating. It is not possible for me to hardcode the tab in html as you mentioned. Please suggest me a way to put icon as header.

[nikiteshb]

use ng-template and the tabHeading directive

<tabset>
  <tab heading='Tab 1'>Tab 1 content</tab>
  <tab>
    <ng-template tabHeading><i class="fa fa-star"></i>Tab 2</ng-template>
    Tab 2 content
  </tab>
</tabset>

Hi,

in my case, the tabs are dynamically generating. It is not possible for me to hardcode the tab in html as you mentioned. Please suggest me a way to put icon as header.

I am also not able change style of this tabset heading bcz it is coming from ng-template tabheading.

what i should do for changing / customizing that?