Ionic 4 how to navigate from tab page to non-tab page keeping tab?

ionic 4 show tabs on all pages
ionic 4 hide tabs
ionic 4 tabs routing
ionic 3 tabs navigation
ionic 4 tab example
ionic/react tabs
ion-tabs default
ionic tabs theme

In Ionic 4, I have an application with a tabs ( 5 pages Home, Search, Map, Info, Tarif) From Search page i navigate to Detail page but i want to keeping the tab menu on Detail page. I don't know if is possible ?

How do you configure the route ? This is my: app-routing.module.ts

`const routes: Routes = [
  { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
  { path: 'map', loadChildren: './map/map.module#MapPageModule' },
  { path: 'search', loadChildren: './search/search.module#SearchPageModule' },
  { path: 'station', loadChildren: './station/station.module#StationPageModule' },
  { path: 'info', loadChildren: './info/info.module#InfoPageModule' },
  { path: 'tarif', loadChildren: './tarif/tarif.module#TarifPageModule' }
];`

and my `tabs.router.module.ts`

`const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'search',
        outlet: 'search',
        component: SearchPage
      },
      {
        path: 'map',
        outlet: 'map',
        component: MapPage
      },
      {
        path: 'info',
        outlet: 'info',
        component: InfoPage
      },
      {
        path: 'tarif',
        outlet: 'tarif',
        component: TarifPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];`

The station page must be a child page of Search page ?

You do that using this setting in app.module.ts file.

IonicModule.forRoot(MyApp, {
    tabsHideOnSubPages: false
})

Ionic 4 - navigate from tab page to non-tab page keeping tabs, In Ionic 4, I have an application with tabs (Home, Search, Info). From Search page, I navigate to Detail page but I want to keep the tab menu on  From the search page i can go on a non-tab page like this this.router.navigate(['station'], { queryParams: station}); On the station page i have a back button to return to the search page <ion-back-button text=""></ion-back-button> The back button disappear at the second time. Here are some additional informations: tabs.router.module.ts

As ionic tabs template have this provisioning to push any detail page with in the same tab navigation stack.

So you can do it like below to push your Detail view in same Search tab section.

this.navCtrl.push(DetailPage, { detailId: detailData.id }); 

by doing this you can push your detail page into same Tab page.

Hope this will helps!

Ionic 4 how to navigate from tab page to non-tab page keeping tab?, As ionic tabs template have this provisioning to push any detail page with in the same tab navigation stack. So you can do it like below to push  From the search page i can go on a non-tab page like this this.router.navigate(['station'], { queryParams: station}); On the station page i have a back button to return to the search page ``` ```` When i click on the tab menu on an other page, i have a white screen without log on xcode. On web all work fine, i reproduce the bug only on IOS.

You have to make the Detail page a child of the "tabs" routes. This works without displaying an icon for that page in the tab icon bar.

Add an entry into the "children" array in tabs.router.module.ts:

 {
    path: 'detail',
    children: [
      {
        path: '',
        loadChildren: '../detail/detail.module#DetailPageModule'
      }
    ]
 },

Then you may navigate to /tabs/detail, for example in a ion-button or similar by [routerLink]="['/tabs/detail']".

If you like, you may also define a redirect route in your app-routing.module.ts:

 { path: 'detail', redirectTo: '/tabs/detail' }

A drawback of this solution is, that the tab bar icon of your "Search" page will not be coloured when the "Detail" page is displayed. But this may be solved by additional CSS formatting.

Ionic 4, Ionic 4 — Hiding & Showing Tabs on certain pages The biggest change, in my opinion, is how we utilize Tabs and Navigation. tab. Unfortunately, that has not been implemented for Ionic 4 as of yet, though it has been You can set them to private if you wish, but I recommend keeping them as public. Tab Routing. An advanced technique is to use named outlets and secondary routes for rendering nested content inside the view - this is how the Ionic Tabs starter template works. The reason behind this routing setup is to achieve a push/pop style of navigation commonly used in native apps.

[Ionic v4-beta.3] Bug navigation between tab page & no page tab , [Ionic v4-beta.3] Bug navigation between tab page & no page tab - back button 【ionic 4】ionic back button issue #15316 I also tried a lot of ways like you, but I don't want to write another component for this and maintain it. Swipeable Tabs is type of Tabs where users can swipe between the tabs of your app, something you might know from various apps like Instagram. It’s not easy possible with the standard Ionic components, but we can use a great package to achieve the desired behavior even with additional features.

nav.setRoot to a page without tabs still display tabs · Issue #8840 , This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic,  Another solution would be to save data to the storage, navigate and then load the data again but it involves dealing with async code and would make the process even slower. Therefore, the last proposed solution might be your best bet. However, keeping data inside the service instead of attaching it to the Router is also an equally good solution

Master/Detail Navigation Within a Tabs Layout in Ionic, We will have one of our tabs provide the ability to navigate to a page that of the folder for the tab they will be used in, I think this just helps to keep Note that these are not being added as children routes of tab2 , we are just  Bug Report Ionic Info ionic V4.0.2 Describe the Bug I’m getting problem of page refreshing when navigate to others tabs. for example I got 3 tabs (homepage, account, feedback) then inside account tabs got a link that navigate to other pa

Comments
  • it seems to me that this option does not exist in ionic 4