I have a dialog with different tabs. I want to use the tabs for users as well for group of users. The dialog is quite similar therefore I want to use it as a generic one.... Tabs are used from ngx-bootstrap (1.6.6)
<tabset>
<div *ngIf="isUserEditor; else groupDetails">
<tab heading="User details">
Details...content 4 user
</tab>
</div>
<ng-template #groupDetails>
<tab heading="Group details">
Group content
</tab>
</ng-template>
<tab heading="Permissions">
Permission settings
</tab>
</tabset>
I'm facing different problems:
The above syntax for the if/else does not work. i.e. the content of UserDetails is displayed independent of the selected tab.
a) Why is the content of UserDetails displayed in all tabs?
b) If I change to if/then/else-Syntax UserDetails is not displayed in all tabs, but the tab-heading remains.
The display order is annoying - namely I see the permission tab at the first position - but I want to have it on the last position. Is there a way to achieve it? Note: The UserDetails might be split up into more than one tab, the Permission tab might be not the last tab which will be added. I'm looking for a solution without too much code duplication.
*ngIf a div container or a ng-container?Honestly I have no clue if this is bug in ngx-bootstrap or not... But it could be as well incorrect usage of syntax...
The following works:
<tabset *ngIf="isUserEditor>=0">
<div *ngIf="isUserEditor; then userDetails else groupDetails"></div>
<ng-template #userDetails>
<tab heading="User details">
Details...content 4 user
</tab>
</ng-template>
<ng-template #groupDetails>
<tab heading="Group details">
Group content
</tab>
</ng-template>
<ng-container *ngIf="true">
<tab heading="Permissions">
Permission settings
</tab>
</ng-container>
</tabset>
The main trick consists of 2 parts:
isUserEditor needs to be initialized to -1 and so the tabs are not rendered at the very beginning!1/3. For your first problem is because you are wrapping <tab> inside <div>. You dont need to handle visibility like that. There is a [active] input for <tab>:
<tabset>
<tab header="User details" [active]="tabsActivity.tab1" (select)="tabToggle('tab1')">
Details...content 4 user
</tab>
<tab header="Group details" [active]="tabsActivity.tab2" (select)="tabToggle('tab2')">
Group content
</tab>
<tab header="Permissions" [active]="tabsActivity.tab3" (select)="tabToggle('tab3')">
Permission settings
</tab>
</tabset>
Where tabsActivity is a model for all states of tabs.
(select) will toggle individual activity of tabs by chaning boolean state of tabsActivity properties.
[active].