Repository navigation
tabItems are showed in the wrong order when using *ngIf (angular) #850
Description
Activity
@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.
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>- added this to the milestone
on Jul 5, 2017 Same thing happens when ngIf is used on ng-container component.
Reacted by Corbin Crutchley, Salik Sadruddin Merani, Sergey Mell, Ihor Tsvietkov, Alex Gritton and Garnik- modified the milestones: ,
on Aug 21, 2017 - modified the milestones: ,
on Sep 8, 2017 8 remaining items
Not sure about the
tabItems, but layout order for*ngIfon/insideng-containeris happening on"@nativescript/angular": "^10.1.3"and"@nativescript/core": "^7.0.3"Reacted by Andrew Mykhalchuk@nikoTM can you provide a sample project (maybe on another issue as well)? Does it also happen on Angular 8 (or 9 without ivy)?
@edusperoni https://github.com/nikoTM/ivy-ngIf-bug seems to be happening on ivy only for me
@nikoTM can you check with the latest nativescript-angular release? Should be fixed!
@edusperoni seems to be happening on
10.1.4, pushed the change.@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 thanks, that was very quick!
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