Use a custom-built "tab view"

app/app.component.ts

@@ -1,46 +1,67 @@
 import {Component} from "@angular/core";
+import {RouterExtensions} from "nativescript-angular";
+import {ActivatedRoute} from "@angular/router";
 
 @Component({
     selector: "my-app",
     template: "<page-router-outlet></page-router-outlet>"
 })
 export class AppComponent {}
 
+@Component({
+    selector: "my-tabs",
+    template: `<GridLayout height="60" columns="25*, 25*, 25*, 25*">
+                <GridLayout col="0" horizontalAlignment="center" (tap)="setTab(0)">
+                    <Label text="Tab 1" [ngClass]="{'tab-selected': selected === 0}"></Label>
+                </GridLayout>
+                <GridLayout col="1" horizontalAlignment="center" (tap)="setTab(1)">
+                    <Label text="Tab 2" [ngClass]="{'tab-selected': selected === 1}"></Label>
+                </GridLayout>
+                <GridLayout col="2" horizontalAlignment="center" (tap)="setTab(2)">
+                    <Label text="Tab 3" [ngClass]="{'tab-selected': selected === 2}"></Label>
+                </GridLayout>
+                <GridLayout col="3" horizontalAlignment="center" (tap)="setTab(3)">
+                    <Label text="Tab 4" [ngClass]="{'tab-selected': selected === 3}"></Label>
+                </GridLayout>
+            </GridLayout>`
+})
+export class MyTabs {
+    selected: number = 0;
+
+    constructor(private routerExtensions: RouterExtensions) {}
+
+    setTab(tab: number): void {
+        if (tab != this.selected) {
+            this.selected = tab;
+            this.routerExtensions.navigate(["/main/tab/" + tab], { clearHistory: true });
+        }
+    }
+}
 
 @Component({
     selector: "main",
-    template: `<GridLayout>
-                    <TabView>
-                        <GridLayout *tabItem="{title: 'Tab 1'}">
-                            <tab-1-component></tab-1-component>
-                        </GridLayout>
-                        <GridLayout *tabItem="{title: 'Tab 2'}">
-                            <tab-2-component></tab-2-component>
-                        </GridLayout>
-                    </TabView>
+    template: `<GridLayout rows="*, auto">
+                    <GridLayout row="0">
+                        <router-outlet></router-outlet>            
+                    </GridLayout>
+                    <GridLayout row="1" backgroundColor="#5f9ea0">
+                        <my-tabs></my-tabs>        
+                    </GridLayout>
                 </GridLayout>`
 })
 export class MainComponent {}
 
 
 @Component({
-    selector: "tab-1-component",
-    template: `<page-router-outlet></page-router-outlet>`
-})
-export class Tab1Component {}
-
-@Component({
-    selector: "tab-1-child",
-    template: `<GridLayout>
-                <Label text="Tab 1"></Label>
+    selector: "tab-component",
+    template: `<GridLayout horizontalAlignment="center">
+                <Label [text]="'Tab ' + (tab)"></Label>
             </GridLayout>`
 })
-export class Tab1Child {}
+export class TabComponent {
+    tab: number;
 
-@Component({
-    selector: "tab-2-component",
-    template: `<GridLayout>
-				<Label text="Tab 2"></Label>
-			</GridLayout>`
-})
-export class Tab2Component {}
+    constructor(private activatedRoute: ActivatedRoute) {
+        this.activatedRoute.params.subscribe(params => this.tab = parseInt(params['tab']) + 1);
+    }
+}

app/app.css

@@ -18,3 +18,8 @@ of writing your own CSS rules. For a full list of class names in the theme
 refer to http://docs.nativescript.org/ui/theme.
 */
 @import 'nativescript-theme-core/css/core.light.css';
+
+
+.tab-selected {
+    color: chartreuse;
+}

app/app.module.ts

@@ -1,14 +1,15 @@
 import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
 import { NativeScriptModule } from "nativescript-angular/nativescript.module";
 
-import {AppComponent, MainComponent, Tab1Component, Tab2Component, Tab1Child} from "./app.component";
+import {AppComponent, MainComponent, MyTabs, TabComponent} from "./app.component";
 import {NativeScriptRouterModule} from "nativescript-angular";
 
 export const routes = [
     { path: "", redirectTo: "main", pathMatch: "full" },
     { path: "main", component: MainComponent,
         children: [
-            { path: "", component: Tab1Child }
+            { path: "", redirectTo: "tab/0", pathMatch: "full" },
+            { path: "tab/:tab", component: TabComponent }
         ]
     },
     /** other paths, such as a long screen...etc **/
@@ -18,9 +19,8 @@ export const routes = [
     declarations: [
         AppComponent,
         MainComponent,
-        Tab1Component,
-        Tab1Child,
-        Tab2Component
+		TabComponent,
+        MyTabs
     ],
     bootstrap: [AppComponent],
     imports: [