CODEWITHSUNDEEP
nativescriptangular2-nativescript
MMA
MMA

Reputation: 525

NativeScript Tab View Property binding tabItem error

I want to implement a TabView with Angular 2.0.1, NativeScript 2.3.0. I follow this official guide here, but run into an issue below. 

<TabView #tabview>
        [ERROR ->]<StackLayout *tabItem="{title: 'Profile'}" >
          <ListView [items]='items'>
            <template let-i"): LoginComponent@17:4
    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. ("
          </ListView>
        </StackLayout>
        [ERROR ->]<StackLayout *tabItem="{title: 'Stats'}">
          <Label text="Second tab item"></Label>
        </StackLay"): LoginComponent@24:4
    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="Second tab item"></Label>
        </StackLayout>
        [ERROR ->]<StackLayout *tabItem="{title: 'Settings'}">
          <Label text="Third tab item"></Label>

The error I got from the compiler is 

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.

I thought all of nativescript directives have been included by default, ex: Button, TextField, etc. Is *tabItem a special directive that I need to import manually?

By the way, What I really want to do, is to have a TabView stick at the bottom of the phone, like Dock with a few tabs, exactly like Facebook mobile app dock. Can someone post a code snippet?

Upvotes: 0

Views: 723

Answers (3)

Alex Onozor
Alex Onozor

Reputation: 7081

The common module is all you need to import, it's responsible for the tabViews and all it's child property and element. 

import { NativeScriptCommonModule } from 'nativescript-angular/common';

don't forget to mount in your import.

@NgModule({
  imports: [NativeScriptCommonModule, ...]
})

Upvotes: 0

JillevdW
JillevdW

Reputation: 1137

This question was asked over 2 years ago, but I ran into this error today and here's how I ended up fixing it. I use a structure where all pages are imported by a PageModule, and that PageModule is then imported by the AppModule. The issue at hand: PageModule doesn't know about the NativeScriptModule. If you add NativeScriptModule to the import array of your PageModule (or whatever other module you're using, could be for importing Components or anything else), it'll fix the problem.

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
// Module declaration, not important
imports = [
    // Other imports
    NativeScriptModule
],

Upvotes: 0

Igor Petrov
Igor Petrov

Reputation: 11

Ensure you import NativeScriptModule in your Angular @NgModule:

import { NativeScriptModule } from 'nativescript-angular/platform';
...
@NgModule({
  imports: [NativeScriptModule, ...]
})

Answer is late but hope it help someone else.

Upvotes: 1

Related Questions