Tutorial

Ionic 4 and Angular: Tabs

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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!

0 Comments

Creative Commons License