TabView in Angular - better example?


#1

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

https://docs.nativescript.org/angular/code-samples/ui/tab-view

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?


#2

My preference for this =>


#3

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.

:slight_smile:


#4

Using the solution here http://forum.nativescript.org/t/fire-nativescript-angular-tabitem-event-when-tabitem-gets-selected/245

I have it working in Yowwlr! You can take a look here for the use of partials in the home folder: http://github.com/jlooper/yowwlr


#5

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


#6

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"
         selectedColor="#1083BF">
    <StackLayout *tabItem="{title: 'Featured'}">
        <router-outlet name="featured-items"></router-outlet>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Map'}">
        <router-outlet name="map"></router-outlet>
    </StackLayout>
</TabView>

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?

Cheers,
Dem


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

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:


#8

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


#9

No worries !

Cheers from France :smile:


#10

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.


#11

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?

Thanks,
Dem


#12

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!!!


#13

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. https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee