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

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

@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>

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

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"

@nikoTM

@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

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

@nikoTM

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

@edusperoni

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

@nikoTM

@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

@nikoTM

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

@edusperoni

@edusperoni thanks, that was very quick!

Navigation Menu

Repository navigation

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

Please, provide the details below:

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

Tell us about the problem

Which platform(s) does your issue occur on?

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

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

8 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Please, provide the details below:

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

Tell us about the problem

Which platform(s) does your issue occur on?

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

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

Activity

NickIliev commented on Jun 16, 2017

NickIliev commented on Jun 16, 2017

erkanarslan commented on Aug 18, 2017

8 remaining items

nikoTM commented on Sep 21, 2020

edusperoni commented on Sep 21, 2020

nikoTM commented on Sep 21, 2020

edusperoni commented on Sep 21, 2020

nikoTM commented on Sep 21, 2020

edusperoni commented on Sep 21, 2020

edusperoni commented on Sep 21, 2020

nikoTM commented on Sep 21, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions