Ionic 4 - navigate from tab page to non-tab page keeping tabs

Ionic Framework
1

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 the Detail page. I want to keep the tabs visible in the whole application. I don’t know if is possible? If yes, how do you configure the route?

2

if you want to do this. your ‘app-routing.module.ts’ should only contain

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

and all the pages are declared as paths in ‘tabs.router.module.ts’ like the existing examples.
(don’t forget to add the Module to ‘tabs.module.ts’ so that the page will be lazy-loaded)
then you just navigate like:

<ion-tab label="" icon="person" href="/tab/(outlet:path)">
    <ion-router-outlet name="outlet"></ion-router-outlet>
  </ion-tab>

(there is a code version of this, but i dont’t remember atm. just google it)

i would suggest to allways use routing like this if you are using tabs and to use ModalController if you want a page above the tabs

1 Like
3

The main purpose is to keep the tabs visible in my whole application.

If I have a menu that contains a link to a section called ‘News’ displaying a list of news and it is not defined in the tabs HTML page.

“tabs.page.html”

<ion-tabs>
  <ion-tab icon="home" href="/tabs/(home:home)">
    <ion-router-outlet name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="information-circle" href="/tabs/(about:about)">
    <ion-router-outlet name="about"></ion-router-outlet>
  </ion-tab>
  <ion-tab icon="contacts" href="/tabs/(contact:contact)">
    <ion-router-outlet name="contact"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

“app.component.html”

<ion-menu-toggle auto-hide="false">
   <ion-item href="tabs/(home:News)">
     <ion-icon slot="start"></ion-icon>
      <ion-label>
      News
     </ion-label>
  </ion-item>
</ion-menu-toggle>

and I want the tabs to be visible in the News section, so my ‘tabs.router.module.ts’ should contain the following:

“tabs.router.module.ts”

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';
import { HomePage } from '../home/home.page';
import { AboutPage } from '../about/about.page';
import { ContactPage } from '../contact/contact.page';
import { NewsPage } from '../news/news.page';
import { NewsDetailsPage } from '../news/news-details.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        outlet: 'home',
        component: HomePage
      },
      {
        path: 'about',
        outlet: 'about',
        component: AboutPage
      },
      {
        path: 'contact',
        outlet: 'contact',
        component: ContactPage
      },
      {
        path: 'news',
        outlet: 'home',
        component: NewsPage
      },
      {
        path: 'news-details',
        outlet: 'home',
        component: NewsDetailsPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule { }

and in the news section or from any page in the app, I want to link to one of the news details, should use it like this?

<p><a href="/tabs/(home:News)">go to news</a></p>
<p><a href="/tabs/(home:News/details)">go to news details</a></p>

is my structure correct?