Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
aihilali opened this issue Jun 15, 2017 · 4 comments
Closed

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

aihilali opened this issue Jun 15, 2017 · 4 comments
Labels
os: android question

Comments

@aihilali
Copy link

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.
@NickIliev
Copy link
Contributor

NickIliev commented Jun 15, 2017 •
edited
Loading

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

@aihilali
Copy link
Author

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>

@NickIliev NickIliev mentioned this issue Jun 16, 2017
Open
@NickIliev
Copy link
Contributor

This issue was moved to NativeScript/nativescript-angular#850

@lock
Copy link

lock bot commented Aug 28, 2019

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@lock lock bot locked and limited conversation to collaborators Aug 28, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
os: android question
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@NickIliev @aihilali