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

score 2 · Accepted Answer · edited Feb 28 '20 at 05:22

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

Thanks. But the requirement is to achieve the same using ngbtabset. — Mukil Deepthi, Feb 12 '20 at 09:58
@MukilDeepthi If it worked for you,could you mark this as answer? — Timuçin Çiçek, Feb 12 '20 at 19:04

score 0 · Answer 2 · answered Apr 29 '20 at 17:47

if you add paragraph tag inside tabset you can add button inside the paragraph tag. You can refer to the html below

        <p>
          <button class="btn btn-outline-primary" type="button" name="button">Edit Profile</button>
        </p>

This is how my css looks like but you can change the css as per your requirement.

button {
   margin-top: -160px;
   right: 15px;
   border: none;
   background-color: green;
   color: white;
   height: 50px;
   position: absolute;
   border-radius: 0%;
}

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

2 Answers2