How To Add Tabs with Ionic 4 and Angular

Introduction

Tabs! They’re a stable way to manage multiple views in modern applications. In this article, we’ll be looking at how to use Tabs with Ionic 4.

We’ll be using Ionic and Angular for this example, but as Ionic components are standard Web Components, the process is similar across frameworks.

Setting Up the Project

Let’s first initialize a new project using the Ionic CLI.

First, install the Ionic CLI, if you don’t have it installed already:

npm install ionic --global

Then, create a new project:

ionic start ionicTabs blank

Then, change into the new project directory:

cd ionicTabs

Run the project in the browser:

ionic serve

Building Pages

We’ve now got an Ionic 4 and Angular project up and running. Let’s generate some new pages to provide the foundation for our tab system.

Generate the main page that serves the tabs:

ionic generate page tabs

Generate individual tabs:

ionic generate page tab1
ionic generate page tab2
ionic generate page tab3

At this stage, we can go ahead and add any content we’d like to each tab. For this example, we’ll make the following assumptions:

1. Tab1 -> Home
2. Tab2 -> Feed
3. Tab3 -> Settings

For each tab, update the HTML to reflect this:

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Home</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

</ion-content>

Our main tabs.page.html houses each of the tabs and we can add an ion-tabs and ion-tab-bar with a reference to our tab by route:

<ion-tabs>

  <ion-tab-bar slot="bottom" color="primary">
    <ion-tab-button tab="tab1">
      <ion-icon name="home"></ion-icon>
      <ion-label>Home</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab2">
      <ion-icon name="apps"></ion-icon>
      <ion-label>Feed</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="tab3">
      <ion-icon name="settings"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Building Routes

Now we can set up routing for our tabs page. Let’s set the tabs page to be the default route inside of our app-routing.module.ts:

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

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

When the user hits the default route, we’ll need to handle which tab to be shown. Create a new file named tabs-routing.module.ts inside of the tabs folder with the following content:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children:
      [
        {
          path: 'tab1',
          children:
            [
              {
                path: '',
                loadChildren: '../tab1/tab1.module#Tab1PageModule'
              }
            ]
        },
        {
          path: 'tab2',
          children:
            [
              {
                path: '',
                loadChildren: '../tab2/tab2.module#Tab2PageModule'
              }
            ]
        },
        {
          path: 'tab3',
          children:
            [
              {
                path: '',
                loadChildren: '../tab3/tab3.module#Tab3PageModule'
              }
            ]
        },
        {
          path: '',
          redirectTo: '/tabs/tab1',
          pathMatch: 'full'
        }
      ]
  },
  {
    path: '',
    redirectTo: '/tabs/tab1',
    pathMatch: 'full'
  }
];

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

As you can see, we’re exporting a module that contains the route configuration for our tabs. The path (i.e., tab1) should correspond to the ion-tab-button as seen inside of our tabs.page.html:

<ion-tab-button tab="tab1">
  <ion-icon name="home"></ion-icon>
  <ion-label>Home</ion-label>
</ion-tab-button>

Finally, we’ll need to import this module inside of our tabs.module.ts:

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { TabsPageRoutingModule } from './tabs-routing.module';

import { TabsPage } from './tabs.page';

@NgModule({
  imports:
    [
      IonicModule,
      CommonModule,
      FormsModule,
      TabsPageRoutingModule
    ],
  declarations:
    [
      TabsPage
    ]
})
export class TabsPageModule {}

We should now be able to navigate through our application using the tab structure!

Conclusion

In this tutorial, you learned how to use Tabs with Ionic 4.