Ionic 4 and Angular: Tabs

Paul Halliday

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.

Note: Whilst you can start a new Ionic project with the tabs template, this article looks at integrating tabs to an existing project instead.

New Project

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

# Install the Ionic CLI, if you don't have it installed already:
$ npm i ionic -g

# Create a new project
$ ionic start ionicTabs blank

# Change directory
$ cd ionicTabs

# Open up the project in VS Code or editor of your choice
$ code .

# Run the project in the browser
$ ionic serve

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:

# Main page that serves our tabs
$ ionic generate page tabs

# 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

I’ve therefore updated the HTML to reflect this, per tab:

<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>

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!

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#