Accordion / Tabset: adding close button in a tab header

It is quite common to have a little close button on each tab of a tabset to close a given tab. Unfortunately we can’t easily add such a button today since content of the ngTabTitle tab is added inside header’s link (<a> element). This setup limits what users can put in a tab header.

Potential solutions:

• have users provide the whole link as part of the ngTabTitle template - the downside here is that users would have to manage the active and disabled states as well as a selection logic;
• add a new directive (ngTabHeader) - if provided its content would be added after a link. The downside here is that there might be someone coming and saying that I want to insert sth before a link…

Not sure what is the best course of action here, to be discussed.

[aegyed91]

This is not valid html, but works fine.

<a class="nav-link active" href="#">
  Active
  <button class="close" type="button">×</button>
</a>

Another solution would be (if nesting templates is possible in ng2):

<ngb-tabset>
  <ngb-tab>
    <template ngbTabHeader>
      <!-- prepend something -->
      <template ngbTabTitle><b>Fancy</b> title</template>
      <!-- append something -->  
    </template>
    <template ngbTabContent>content</template>
  </ngb-tab>
</ngb-tabset>

[maxokorokov]

Since version 5.2.0 there is a new NgbNav set of directives that fix this issue. NgbNav is meant to replace the NgbTabset component (completely deprecated in version 6.0.0) as a more flexible alternative.

I suggest you migrate to it → https://ng-bootstrap.github.io/#/components/nav/overview