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.
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:
You can get TabsetComponent via ViewChild and then look at its tabs property, there you'll find all tabs and then it will be easy to find out which one is active. There's an example of it (open a console to see a result) https://stackblitz.com/edit/angular-wm4ywp?file=app%2Fapp.component.ts