Conditionally displaying a tab in tabview with *ngIf

[devna13]

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

[NickIliev]

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>

[devna13]

Thanks @NickIliev for your detailed answer!