Utilizing the TabView module from primeng, I have created a dynamic tab where only the last tab remains static. The property used is 'selected', and for the dynamic tab, it is set as [selected]="'tab' + $index", where $index represents the index of ngFor loop.
Since the list contains only one item, the property 'selected' will be tab0. Therefore, I have defined the attribute tab0 as false.
The issue arises when both tabs are selected despite the attributes being defined as false.
<p-tabView>
<p-tabPanel header="{{category.categoryLabel}}" *ngFor="let category of categories; let $index=index" [selected]="'tab' + $index">
<button type="button" class="btn btn-primary">{{'button.previous'|translate}}</button>
<button type="button" class="btn btn-primary">{{'button.next'|translate}}</button>
<button class="btn btn-default">{{'button.reset'|translate}}</button>
</p-tabPanel>
<p-tabPanel header="{{'tab.getProduct'|translate}}" [selected]="tab">
<button type="button" class="btn btn-primary">{{'button.next'|translate}}</button>
<button class="btn btn-default">{{'button.reset'|translate}}</button>
</p-tabPanel>
</p-tabView>
public tab0: boolean = false;
public tab: boolean = false;