Nativescript-angular: Conditionally displaying a tab in tabview with *ngIf
I'm getting an exception when using *ngIf to show/hide tab;
<TabView>
<!-- TAB1 -->
<template tabItem title="TAB1">
<Label text="Toggle" (tap)="showTab2 = !showTab2" ></Label>
</template>
<!-- TAB2 -->
<template tabItem title="TAB2" *ngIf="showTab2">
<Label text="Tab2" textWrap="true"></Label>
</template>
</TabView>
caused by: View not added to this instance. View: Label(1753) CurrentParent: undefined ExpectedParent: TabView(793)
1 0x10e660f9b NativeScript::FFICallback<NativeScript::ObjCMethodCallback>::ffiClosureCallback(ffi_cif*, void*, void**, void*)
2 0x10ede365e ffi_closure_unix64_inner
3 0x10ede4012 ffi_closure_unix64
4 0x10fdd619a _UIGestureRecognizerSendActions
5 0x10fdd4197 -[UIGestureRecognizer _updateGestureWithEvent:buttonEvent:]
6 0x10fddc655 ___UIGestureRecognizerUpdate_block_invoke898
7 0x10fddc4f3 _UIGestureRecognizerRemoveObjectsFromArrayAndApplyBlocks
8 0x10fdc9e75 _UIGestureRecognizerUpdate
9 0x10f95648e -[UIWindow _sendGesturesForEvent:]
10 0x10f9576c4 -[UIWindow sendEvent:]
11 0x10f902dc6 -[UIApplication sendEvent:]
12 0x10f8dc553 _UIApplicationHandleEventQueue
13 0x111c1f301 __CFRUNLOOP_IS_CALLING_OUT_TO_A_SOURCE0_PERFORM_FUNCTION__
14 0x111c1522c __CFRunLoopDoSources0
15 0x111c146e3 __CFRunLoopRun
16 0x111c140f8 CFRunLoopRunSpecific
17 0x1147acad2 GSEventRunModal
18 0x10f8e1f09 UIApplicationMain
19 0x10ede3e6d ffi_call_unix64
20 0x128a31560
file:///app/tns_modules/rxjs/Subscriber.js:227:22: JS ERROR Error: Error in pages/test.html:52:12 caused by: View not added to this instance. View: Label(1753) CurrentParent: undefined ExpectedParent: TabView(793)
Jan 6 13:36:47 SpringBoard[52639]: UNNotificationRegistrarConnectionListener connection invalidated
Jan 6 13:36:47 com.apple.CoreSimulator.SimDevice.-AAD3-40AD-B15F-1D1382B079AC.launchd_sim[52623] (UIKitApplication:com.ecowell.healthsignal[0xb0a][83011]): Service exited due to signal: Segmentation fault: 11
question
devna13
All 2 comments
Hey @devna13
Indeed you can not use a structural directive to remove a tab from the visual tree.
However, you can remove the tab via code behind.
As a side note, you are using the syntax which is deprecated for NG-2 applications.
To create tab-view in angular based application use the following syntax
<TabView>
<StackLayout *tabItem="{title: 'Profile', iconSource: '~/icon.png'}" >
<ListView [items]='items'>
<template let-item='item'>
<Label [text]='item.itemDesc' ></Label>
</template>
</ListView>
</StackLayout>
<StackLayout *tabItem="{title: 'Stats'}">
<Label text="Second tab item"></Label>
</StackLayout>
<StackLayout *tabItem="{title: 'Settings'}">
<Label text="Third tab item"></Label>
</StackLayout>
</TabView>
More information here.
Sample with creating tab-view items (code behind) can be found here and based on that example you can re-intialize your new tabs and load them into the tab view on demand.
Remove tab by re-initializing all the tab items
e.g.
page.component.ts
import { Component } from "@angular/core";
import { StackLayout } from "ui/layouts/stack-layout";
import { Label } from "ui/label";
import { TabView, SelectedIndexChangedEventData } from "ui/tab-view";
import { Color } from "color";
@Component({
moduleId: module.id,
templateUrl: "./tab-view-items.component.html",
})
export class TabViewItemsComponent {
public tabviewitems: Array<any>;
constructor() {
this.tabviewitems = [];
let innerFirstStackLayout = new StackLayout();
let firstLabel = new Label();
firstLabel.margin = "15";
firstLabel.text = "Label first page";
innerFirstStackLayout.backgroundColor = new Color("red");
innerFirstStackLayout.addChild(firstLabel);
let innerSecondStackLayout = new StackLayout();
let secondLabel = new Label();
secondLabel.margin = "15";
secondLabel.text = "Label second page";
innerSecondStackLayout.backgroundColor = new Color("green");
innerSecondStackLayout.addChild(secondLabel);
let innerThirdStackLayout = new StackLayout();
let thirdLabel = new Label();
thirdLabel.margin = "15";
thirdLabel.text = "Label third page";
innerThirdStackLayout.backgroundColor = new Color("blue");
innerThirdStackLayout.addChild(thirdLabel);
this.tabviewitems.push({ "title": "Tab1", "view": innerFirstStackLayout });
this.tabviewitems.push({ "title": "Tab2", "view": innerSecondStackLayout });
this.tabviewitems.push({ "title": "Tab3", "view": innerThirdStackLayout });
}
public reintializeTabs() {
this.tabviewitems = []; // reet all tab items
let innerFirstStackLayout = new StackLayout();
let firstLabel = new Label();
firstLabel.margin = "15";
firstLabel.text = "Label first page";
innerFirstStackLayout.backgroundColor = new Color("red");
innerFirstStackLayout.addChild(firstLabel);
let innerSecondStackLayout = new StackLayout();
let secondLabel = new Label();
secondLabel.margin = "15";
secondLabel.text = "Label second page";
innerSecondStackLayout.backgroundColor = new Color("green");
innerSecondStackLayout.addChild(secondLabel);
this.tabviewitems.push({ "title": "Tab1", "view": innerFirstStackLayout });
this.tabviewitems.push({ "title": "Tab2", "view": innerSecondStackLayout });
}
}
page.component.html
<StackLayout>
<Button text="removeTab" (tap)="reintializeTabs()"></Button>
<GridLayout sdkExampleTitle sdkToggleNavButton>
<TabView #tabView [items]="tabviewitems" ></TabView>
</GridLayout>
</StackLayout>
NickIliev
on 9 Jan 2017
😕1
👍1
Thanks @NickIliev for your detailed answer!
devna13
on 9 Jan 2017
Was this page helpful?
0 / 5 - 0 ratings
Related issues
EricRobertBrewer
路
3Comments
sis0k0
路
3Comments
Sulman633
路
3Comments
sunpasup
路
3Comments
bnussey
路
3Comments