CODEWITHSUNDEEP
ionic-frameworktabsionic4
Youtaka
Youtaka

Reputation: 61

How to display Ionic Tabs on all pages?

I'm currently developing a mobile app with Ionic 4. I build it with Ionic CLI but I did a blank project. I created some component (like login, signup...) and after that, I added Tabs from Ionic.

My problem is, Ionic Tabs are presents only on pages in tabs.router.module.ts. How can I do to display Tabs on all pages ?

Except them, every component are in app-routing.module.ts, I tried to cut and paste them in tabs.router.module.ts but I'm not sure that's a good thing to do.

tabs.routes.module.ts

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        children: [
          {
            path: '',
            loadChildren: '../home-page/tab1.module#HomePageModule'
          }
        ]
      },
      {
        path: 'game/new',
        children: [
          {
            path: '',
            loadChildren: '../game/create-game-page/tab2.module#CreateGamePageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full'
  }
];

For the moment my Tabs works, but I'm not sure to understand how they perfectly work. Thank you for your help.

Upvotes: 2

Views: 4053

Answers (2)

MaBbKhawaja
MaBbKhawaja

Reputation: 902

Adding your routes as children to tabs in tab router file will let you acheive your goal.

Upvotes: 2

benra
benra

Reputation: 396

If you want to display your tabs on every page put them into your app.component.html file. Like:

<ion-app>
 <ion-tab-button tab="tab1">
    <ion-label>Label1</ion-label>
    <ion-icon name="search"></ion-icon>
  </ion-tab-button>
  <ion-tab-button tab="tab2">
    <ion-label>Label2</ion-label>
    <ion-icon name="card"></ion-icon>
  </ion-tab-button>
</ion-app>

Don't forget to create your Routes and your Routing in your app-routing.module.ts now.

Upvotes: 0

Related Questions