I have implemented ngb-tabset within a component that is contained within a single div. This div element is conditionally displayed based on the value of a specific condition. If the condition evaluates to false, another section is shown instead.
<div *ngIf="showAllTabs">
<ngb-tabset>
<ngb-tab id="heading-1">
<ng-template ngbTabTitle>
<div>HEADING 1</div>
</ng-template>
</ngb-tab>
<ngb-tab id="heading-2">
<ng-template ngbTabTitle>
<div>HEADING 2</div>
</ng-template>
</ngb-tab>
</ngb-tabset>
</div>
<div *ngIf="!showAllTabs">
<!-- Some other work -->
</div>
An issue arises when the active tab is set to "heading-2", and then the containing division tag becomes hidden and reappears - in this scenario, the active tab automatically switches back to the first tab (heading-1). How can I prevent this from happening?