Merge pull request #237 from NativeScript/niliev/tab

Niliev/tab

Author: tsonevn

Diff for: app/ui-category/tab-view/binding-tab-view-items/binding-tab-view-items.component.html

@@ -1,17 +1,22 @@
 <!-- >> binding-tab-view-html -->
 <TabView [(ngModel)]="tabSelectedIndex" selectedColor="#FF0000" iosIconRenderingMode="alwaysOriginal" sdkExampleTitle sdkToggleNavButton>
-    <StackLayout *tabItem="{title: 'Profile', iconSource: 'res://icon'}" >
-        <ListView [items]="items">
-            <ng-template let-item="item">
-            	<Label [text]="item.itemDesc"></Label>
-            </ng-template>
-        </ListView>
+    <StackLayout *tabItem="{title: 'Profile', iconSource: 'res://icon'}">
+        <StackLayout>
+            <Label [text]="'Profile Tab (tabSelectedIndex = '+ tabSelectedIndex +')'" class="h2 m-t-16 text-center" textWrap="true"></Label>
+            <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
+        </StackLayout>
     </StackLayout>
     <StackLayout *tabItem="{title: 'Stats'}">
-    	<Label text="Second tab item"></Label>
+        <StackLayout>
+            <Label [text]="'Stats Tab (tabSelectedIndex = '+ tabSelectedIndex +')'" class="h2 m-t-16 text-center" textWrap="true"></Label>
+            <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
+        </StackLayout>
     </StackLayout>
     <StackLayout *tabItem="{title: 'Settings'}">
-    	<Label text="Third tab item"></Label>
+        <StackLayout>
+            <Label [text]="'Settings Tab (tabSelectedIndex = '+ tabSelectedIndex +')'" class="h2 m-t-16 text-center" textWrap="true"></Label>
+            <Button text="Change Tab via ngModel" (tap)="changeTab()" class="btn btn-primary btn-active"></Button>
+        </StackLayout>
     </StackLayout>
 </TabView>
 <!-- << binding-tab-view-html -->

Diff for: app/ui-category/tab-view/binding-tab-view-items/binding-tab-view-items.component.ts

@@ -1,27 +1,33 @@
-// >> binding-tab-view-code
+
 import { Component } from "@angular/core";
 import { StackLayout } from "ui/layouts/stack-layout";
 
 import { TabView, SelectedIndexChangedEventData, TabViewItem } from "ui/tab-view";
 
 export class DataItem {
-    constructor(public itemDesc: string) {}
+    constructor(public itemDesc: string) { }
 }
 
 @Component({
     moduleId: module.id,
     templateUrl: "./binding-tab-view-items.component.html",
 })
 export class BindingTabViewItemsComponent {
-    public items: Array<DataItem>;
+    // >> binding-tab-view-code
     public tabSelectedIndex: number;
 
     constructor() {
         this.tabSelectedIndex = 1;
-        this.items = new Array<DataItem>();
-        for (let i = 0; i < 5; i++) {
-            this.items.push(new DataItem("item " + i));
+    }
+
+    changeTab() {
+        if (this.tabSelectedIndex === 0) {
+            this.tabSelectedIndex = 1;
+        } else if (this.tabSelectedIndex === 1) {
+            this.tabSelectedIndex = 2;
+        } else if (this.tabSelectedIndex === 2) {
+            this.tabSelectedIndex = 0;
         }
     }
+    // << binding-tab-view-code
 }
-// << binding-tab-view-code