Is there a way to get the active tab with ngxbootstrap?

Question

I'm developing an Angular app using the ngx tabs :

<div class="modal-body">
    <tabset>
       <tab heading="1"></tab>
       <tab heading="2"></tab>
    </tabset>

</div>
<div class="modal-footer>
   <button *ngIf="Tab Selected = 1"> Save </button>
   <button *ngIf="Tab Selected = 2"> Update </button>
</div>

I would like to know on the template which tab is selected, so I can show/hide the correct buttons.

Answer 1

If you follow ngx-bootstrap documentation you can see that there is an output => 'select'.

It fires when tab became active. Simply you can use this as below.

<div class="modal-body">
<tabset>
   <tab heading="1" (selectTab)="changeTab($event)"></tab>
   <tab heading="2" (selectTab)="changeTab($event)"></tab>
</tabset>

</div>
<div class="modal-footer>
   <button *ngIf="activeTab == 1"> Save </button>
   <button *ngIf="activeTab == 2"> Update </button>
</div>

Inside the component

public activeTab: string; 

changeTab($event) {
   this.activeTab = $event.heading;
}

For further:

https://valor-software.com/ngx-bootstrap/?gclid=CjwKCAjwlejcBRAdEiwAAbj6KTeGOBoB7Q8PwR-hC4ipYDNGQPT7pFOCVLR_pQbN2n4rBHVM6RSL_xoCgPAQAvD_BwE#/tabs