Angular4 - ngIf else with tabs

Question

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:

1. 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.

2. 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.

3. Is there a diff if I use for the *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...

Answer 1

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:

1. isUserEditor needs to be initialized to -1 and so the tabs are not rendered at the very beginning!
2. If I place the last tab as well into a container ==> calculation if displayed or not are done at the very ending => order remains correct!