tabItems are showed in the wrong order when using *ngIf (angular)

[NickIliev]

From @Abderrahmane-H on June 15, 2017 13:33

Please, provide the details below:

Did you verify this is a real problem by searching [Stack Overflow]

yes

Tell us about the problem

tabItems are showed in the wrong order when using *ngIf .

Which platform(s) does your issue occur on?

android, (have not tested on ios yet).

Please provide the following version numbers that your issue occurs with:

nativescript │ 3.0.1 │ 3.0.3 │ Update available │
│ tns-core-modules │ 3.0.1 │ 3.0.1 │ Up to date │
│ tns-android │ 3.0.1 │ 3.0.1 │ Up to date │
│ tns-ios │ │ 3.0.1 │ Not installed

Please tell us how to recreate the issue in as much detail as possible.

-create an app with tabs
-add an *ngif to a tab to be hidden and shown conditionaly.

Copied from original issue: NativeScript/NativeScript#4393

[NickIliev]

@Abderrahmane-H by design in Angular you can not have multiple directives athat are going to create template for your component (in the current context - the tabItem)

So if you have

<StackLayout *tabItem="{ title: 'Third' }" *ngIf="isLogged">

You will receive an error of this sort:

Can't have multiple template bindings on one element. Use only one attribute named 'template' or prefixed with *

Please send us code snippet or sample project demonstrating exactly how you are reproducing the issue.

[NickIliev]

From @Abderrahmane-H on June 15, 2017 14:54

yes I am aware of that, I am using ng-template. here is a code sample

<!--tab1-->
<StackLayout *tabItem="{title: 'tab1'">
   <!--content-->
 </StackLayout>
<!--tab2-->
<StackLayout *tabItem="{title: 'tab2', iconSource: 'res://ic_action_home'}">
   <!--content 2-->
 </StackLayout>
<!--tab3-->
<ng-template [ngIf]="isLoggedIn">
<StackLayout *tabItem="{title: 'tab3'}">
   <!--content-->
 </StackLayout>
</ng-template>
<!--tab4-->
<StackLayout *tabItem="{title: 'tab4'}">
   <!--content 2-->
 </StackLayout>

[erkanarslan]

Same thing happens when ngIf is used on ng-container component.