Posted in Uncategorized

Accordion / Tabset: adding close button in a tab header

   February 25, 2021  1 Comment on 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.

Full dicussion on github.com

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>