CODEWITHSUNDEEP
javascriptangularnativescriptangular2-nativescriptnativescript-angular
David Robert
David Robert

Reputation: 11

How to define a default TabView in nativescript?

I created a new nativescript project using the CLI and selected the "tab navigation". I now have the default 3 tabs and I can't find how can I make the default/selected tab to be the rightmost/center tab.

I already tried to move the tabs around by it is always the leftmost that get loaded first.

<TabView androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

Upvotes: 1

Views: 321

Answers (2)

FrontEnd-er
FrontEnd-er

Reputation: 663

Use this Code.

1. app.component.html:-

 <TabView  [(ngModel)]="tabSelectedIndex"  androidTabsPosition="bottom">

 <page-router-outlet
    *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
    name="homeTab">
 </page-router-outlet>

 <page-router-outlet
    *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
    name="browseTab">
 </page-router-outlet>

 <page-router-outlet
    *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
    name="searchTab">
 </page-router-outlet>

</TabView>

2. app-routing.module.ts:-

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NSEmptyOutletComponent } from "nativescript-angular";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
{
    path: "",
    redirectTo: "/(homeTab:home/default//browseTab:browse/default//searchTab:search/default)",
    pathMatch: "full"
},
{
    path: "home",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/home/home.module#HomeModule",
    outlet: "homeTab"
},
{
    path: "browse",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/browse/browse.module#BrowseModule",
    outlet: "browseTab"
},
{
    path: "search",
    component: NSEmptyOutletComponent,
    loadChildren: "~/app/search/search.module#SearchModule",
    outlet: "searchTab"
}
];

@NgModule({
imports: [NativeScriptRouterModule.forRoot(routes)],
exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

Upvotes: 0

Ehsan K. harchegani
Ehsan K. harchegani

Reputation: 3128

try this

<TabView  [(ngModel)]="tabSelectedIndex"  androidTabsPosition="bottom">

    <page-router-outlet
        *tabItem="{title: 'Home', iconSource: getIconSource('home')}"
        name="homeTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Browse', iconSource: getIconSource('browse')}"
        name="browseTab">
    </page-router-outlet>

    <page-router-outlet
        *tabItem="{title: 'Search', iconSource: getIconSource('search')}"
        name="searchTab">
    </page-router-outlet>

</TabView>

and in your ts file:

 public tabSelectedIndex: number=1; //for example

hope it helps.

Upvotes: 1

Related Questions