Angular bootstrap ngb-tabset add button to the rightside to align with tabs

Question

I am using ngb tabset for tabs in my angular application. Here is the code i am using.

<ngb-tabset activeId="delegate-status" #tabs="ngbTabset" [activeId]="activeTab">

  <ngb-tab title="Delegate status" id="tab-delegate-status">
    <ng-template ngbTabContent class="content-container">
      <delegate-status-report></delegate-status-report>
    </ng-template>
  </ngb-tab>

  <ngb-tab title="No show" id="tab-noshow">
    <ng-template ngbTabContent class="content-container">
      <noshow-report></noshow-report>
    </ng-template>
  </ngb-tab>

</ngb-tabset>

I would like to have some button for eg: Export To CSV, on the right side which aligns the tab. Can anyone help me how to style this to have a button on the right side of this tabs?

Thanks

Answer 1

SOLUTION 1:

You should use ngbNav instead of tabset.ngbNav provides list of elements allow to put any element inside of it and functionality is as same as tabset.

For more info : https://ng-bootstrap.github.io/#/components/nav/overview

thanks to ngb-nav you can insert button element inside li tag and for position below css will work

button{
  position:absolute;
  right:15px;
}

Stackblitz : https://stackblitz.com/edit/angular-us155y-n7tr8e?file=index.html

SOLUTION 2

As you need to use ngb-tabset, I made button absolute to be aligned anywhere as wished again and added top:0 property to make it stick to the top. Added button element under </ngb-tabset>

button{
  position:absolute;
  right:15px;
  top:0;
}

Stackblitz : https://stackblitz.com/edit/angular-us155y-bilsj3?file=app/tabset-preventchange.html