CODEWITHSUNDEEP
angularnativescriptangular2-routingangular2-nativescript
WJosh Vetter
WJosh Vetter

Reputation: 37

How to differentiate routing when using Tabview/BottomNavigation to either keep or remove the BottomNavigation bar

This may be more of an Angular Routing problem than NativeScript, but my app is using NativeScripts BottomNavigation component. And when Navigating from a tab in that component to a sub-component it always keeps the BottomNavigation Tabs at the bottom of the screen. I would like to make it possible to navigate to a completely "new" page that does not have Tabs at the bottom

In my tabs-routing module I have:

const routes: Routes =[
    { path: '', redirectTo: '/default', pathMatch: 'full' },
    {

        path: "default", component: TabsComponent,  children: [
            {
                path: "profile",
                component: NSEmptyOutletComponent,
                loadChildren: () => import("~/app/profile/profile.module").then((m) => m.ProfileModule),
                outlet: "profileTab"
            },
            {
                path: "home",
                component: NSEmptyOutletComponent,
                loadChildren: () => import("~/app/home/home.module").then((m) => m.HomeModule),
                outlet: "homeTab"
            }

and then in my home-routing module:

const routes: Routes = [
    { path: "", redirectTo: "default" },
    { path: "default", component: HomeComponent },
    { path: "next", component: HomeNextComponent }
];

so when I am within the home.component and I try to navigate to the "HomeNextComponent" I use this navigation:

    this.router.navigate(['../next'], {
        transition: { name: 'slideLeft', duration: 250 },
        relativeTo: this.activatedRoute
    });

Which navigates me to the HomeNextComponent, but it keeps the BottomNavigation, how would I differentiate when I want to "keep" or "remove" the BottomNavigation?

Upvotes: 0

Views: 421

Answers (2)

Roundtrip
Roundtrip

Reputation: 93

we also had to overcome this issue and we wrote our own tab service that is called for changing tabs and more. this also includes a logic to hide the bottom nav for certain tabs and pages. This is the relevant code:

this.navBarStrip.visibility = 'collapse';

Where the navBarStrip is a Viewchild reference on the tabstrip part of the bottom nav. So when the bottom nav is loaded, we set the reference in the service. from this point forward we call a tabService.hideTabs() in relevant pages. We found that it is difficult to call it at the right time, so that it feels and looks natural. Try the "loaded" Event in the new page, where you want to hide the tabs. Also you will need a showTabs() method, to revert the visibility change: 

this.navBarStrip.visibility = 'visible';

There you go. That should do the trick.

Upvotes: 0

Dipen Shah
Dipen Shah

Reputation: 26075

I think the problem is with your default app component. Check html code of the default app component, you might be sharing same bottom html only things changes content inside <router-outlet></router-outlet>.

Upvotes: 2

Related Questions