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.

1 possible answer(s) on “Accordion / Tabset: adding close button in a tab header

  1. 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>