Is it possible to generate tabs for TabView same as list items for ListView?


#1

here is the code sample for ListView

// list-test.html
<ListView [items]="myItems" (itemTap)="onItemTap($event)">
    <template let-item="item" let-i="index" let-odd="odd" let-even="even">
        <StackLayout [class.odd]="odd" [class.even]="even">
            <Label [text]='"index: " + i'></Label>
            <Label [text]='"[" + item.id +"] " + item.name'></Label>
        </StackLayout>
    </template>
</ListView>

Is it possible to do the same for TabView ?

the following code does not work :

<FlexboxLayout class="body" #body orintation="vertical">
  <header flexGrow="1"></header>
  <GridLayout #content height="100" flexGrow="2">
    <StackLayout>
      <TabView [items]="modules" selectedIndex="0" flexGrow="2" sdkExampleTitle sdkToggleNavButton>
        <ng-template let-item="item">
          <StackLayout *tabItem="{ title : item.title }">
            <Label [text]="item.title"></Label>
          </StackLayout>
        </ng-template>
      </TabView>
    </StackLayout>
  </GridLayout>
</FlexboxLayout>

the following also does not work and make same error :

      <TabView selectedIndex="0" [items]="pokemons" flexGrow="2" sdkExampleTitle sdkToggleNavButton>
        <ng-template let-item="item">
          <TabViewItem [title]="item">
            <Label [text]="item"></Label>
          </TabViewItem>
        </ng-template>
      </TabView>

I get the following error : Uncaught (in promise): Error: TabViewItem at index 0 does not have a view

What I do wrong and how can I fix that?

using angular4 + nativescript 3.0.3

Regards, Andrey


#2

Andrey,

This worked for me.


  <TabView>
      <ng-template ngFor let-item [ngForOf]="yourCollection">
        <StackLayout *tabItem="{title: item.title}">
       </StackLayout>
    </ng-template>
  </TabView>



Raghu