TabView in Angular - better example?


I’m looking for a better example of an Angular tabview.

This seems to stuff all the code into one view, which isn’t ideal for a more complex app. How can you break up the pages for a better architecture?


My preference for this =>


Thanks, Jorge! So you are crafting the views from within this one .ts component. Have you ever done it in XML, with separate files? I find that so much easier to read.



Using the solution here

I have it working in Yowwlr! You can take a look here for the use of partials in the home folder:


oh perfect… the forum never send a email for the response =( …


I guess I’m late to the party, does anybody know how to make named secondary routes working in nativescript + angular 2?

I’m trying to implement it but the content isn’t showing.

I’ve got a AppComponent with a <page-router-outlet></page-router-outlet> that redirects to a HomeComponent that has 2 children and 2 named router-outlet.

These are my routes:

const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
        path: "home",
        component: HomeComponent,
        children: [
            { path: "featured-items", component: FeaturedItemsComponent, outlet: "featured-items" },
            { path: "map", component: MapComponent, outlet: "map" }

And this is my home.component.html:

<TabView (selectedIndexChanged)="onHomeSelectedIndexChanged($event)" [selectedIndex]="homeSelectedIndex"
    <StackLayout *tabItem="{title: 'Featured'}">
        <router-outlet name="featured-items"></router-outlet>
    <StackLayout *tabItem="{title: 'Map'}">
        <router-outlet name="map"></router-outlet>

I’ve tried asking on Gitter but no response, anybody tried this approach and can point me to the problem?

In the meantime I’m using my backup solution (similar to @jen.looper one), but I’d like to understand why mine isn’t working…

Any idea?


Can we have a child router-outlet in a TabView?

Hi ,

Your router looks good, could you show me the code when you navigate to your <router-outlet> please?

This is how you should do it:

this.router.navigate(['home', {
                    outlets: {'map': ['map']}

And obviously you should navigate to routes in the selectedIndexChanged function.

Hope it helps you :smile:


Thanks @rhanb! I supposed that would work automatically because of the outlet property specified in the children array… :smiley:


No worries !

Cheers from France :smile:


I’m taking advantage of this topic to ask if there is a way to hide/remove a tabItem (selector + view) from the html ? as the *tabItem is a singleton, I can’t use a *ngIf directive, and using the [visibility] selector is only removing the tabItem content but not the child selector in the tabView selection bar.


Hello again @rhanb and @jen.looper, I kept working on my prototype, while the outlet method works, the problem is with the transition to and from another page: if I use outlet the content is dismissed before navigating to the new page, and then going back it’s loaded only after the whole (white) page has appeared.

If I put the page components in the tabs it works properly (but it loads them all in one go, that’s what I want to avoid)…

I’ve created a recording of both version just to show you:

With the outlet

Without the outlet

Are you aware of a way to avoid this behaviour?



Hi @jen.looper sorry for jumping in between of a discussion, but I didn’t find a more appropriate place for this query.

I have seen the example project done by you here.
One thing I saw what you have done is creating separate routing and module classes after login. Can you please explain a bit more about this approach,
is it good to arrange classes like these ?
does this approach improves the speed of the application?

Sorry If I am asking too much :slight_smile:

Thanks in advance!!!


hi, I know that this pattern seems pretty strange. I myself questioned it and was told that this strategy aids in lazy loading when you want to optimize your app down the road.