Nativescript-angular: 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.

[crutchcorn]

Can confirm that this occurs when using ngIf on ng-container as well

[echosalik]

Just to point out... this works with ng-template for tns: 3.4.2

[tsonevn]

The issue is still reproducible with "tns-core-modules": "~4.1.0" and "nativescript-angular": "~6.0.6".

[nikoTM]

Not sure about the tabItems, but layout order for *ngIf on/inside ng-container is happening on "@nativescript/angular": "^10.1.3" and "@nativescript/core": "^7.0.3"

[edusperoni]

@nikoTM can you provide a sample project (maybe on another issue as well)? Does it also happen on Angular 8 (or 9 without ivy)?

[nikoTM]

@edusperoni https://github.com/nikoTM/ivy-ngIf-bug seems to be happening on ivy only for me

[edusperoni]

@nikoTM can you check with the latest nativescript-angular release? Should be fixed!

[nikoTM]

@edusperoni seems to be happening on 10.1.4, pushed the change.

[edusperoni]

@nikoTM thanks!

Turns out that there was some wrong check that made it so it was impossible to add elements to the start of a view. It seems this has been a bug for at least 3 years, but it's such an edge case that no one had quite picked up on it. I saw it happen once on a test project and didn't think much of it because it didn't work anyway.

The PR should be up shortly

[edusperoni]

@nikoTM PR is up #2262.

This issue (#850) isn't the same as the ng-container issue. It seems tabview just doesn't support inserting elements in the middle of it.

[nikoTM]

@edusperoni thanks, that was very quick!