Nested TabView in NativeScript Angular2

315 views Asked by At

I'm trying to create a tabView on one of the pages in my application which is reachable by sidebar. I think that I have misunderstood the concept of TabView since I get this message:

Property binding tabItem not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" section. ("<Label text="scanner"></Label>
    <TabView class="tab">
       [ERROR ->]<StackLayout *tabItem="{title: 'Profile'}">
          <Label text="first tab item"></Label>

The html code for creating the TabView is working if I paste it in my root html file (app.component.html).

This is how my sidedrawer html code looks like, where the ng-content is where the page is included when selected:

<RadSideDrawer [transition]="sideDrawerTransition" tkExampleTitle tkToggleNavButton>
    <StackLayout tkDrawerContent class="sidedrawer-left">
        <StackLayout class="extended-sidedrawer-header">
            <Label text="Navigation Menu"></Label>
        </StackLayout>
        <StackLayout class="sidedrawer-content">
            <Label text="Map" class="sidedrawer-list-item" [nsRouterLink]="['/map']" (tap)="closeDrawer()"></Label>
            <Label text="Beacon" class="sidedrawer-list-item" [nsRouterLink]="['/beacon']" (tap)="closeDrawer()"></Label>
            <Label text="Scanner" class="sidedrawer-list-item" [nsRouterLink]="['/scanner']" (tap)="closeDrawer()"></Label>
            <Label text="Camera" class="sidedrawer-list-item" [nsRouterLink]="['/camera']" (tap)="closeDrawer()"></Label>
        </StackLayout>
    </StackLayout>
    <ScrollView tkMainContent>
        <StackLayout class="page">
            <StackLayout (tap)="openDrawer()" horizontalAlignment="left">
                <Label class="menu-icon" ></Label>
                <Label class="menu-icon" ></Label>
                <Label class="menu-icon" ></Label>
            </StackLayout>
            <ng-content></ng-content>
        </StackLayout>
    </ScrollView>
</RadSideDrawer>
0

There are 0 answers