Routing

Angular routing techniques

Nested Routers

Common scenario is to use nested router outlets. In NativeScript + Angular-2 you can nest router-outlet within other router-outlet or within page-router-outlet.

Module

    export const routerConfig = [
        {
            path: "",
            component: RoutingExamplesComponent
        },
        {
            path: "nested-routers",
            component: NestedRoutersComponent,
            children: [
                { path: "first", component: SubRouteOneComponent },
                { path: "second", component: SubRouteTwoComponent }
            ]
        }
    ];

HTML

<StackLayout sdkExampleTitle sdkToggleNavButton>
    <GridLayout rows="80" columns="*, *">
        <Button text="First" [nsRouterLink]="['first']" class="btn btn-primary btn-active" col="0"></Button>
        <Button text="Second" [nsRouterLink]="['second']" class="btn btn-primary btn-active" col="1"></Button>
    </GridLayout>
    <router-outlet></router-outlet>
</StackLayout>