DigitalOcean

Tutorial

How To Add Tabs with Ionic 4 and Angular

Published on March 1, 2019
How To Add Tabs with Ionic 4 and Angular

This tutorial is out of date and no longer maintained.

Warning: Since publication, Ionic 4 is no longer the latest version. The ionic has been deprecated and @ionic/cli is the preferred method for installing the Ionic CLI.

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.

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

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:

  1. npm install ionic --global

Then, create a new project:

  1. ionic start ionicTabs blank

Then, change into the new project directory:

  1. cd ionicTabs

Run the project in the browser:

  1. 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:

  1. ionic generate page tabs

Generate individual tabs:

  1. ionic generate page tab1

  2. ionic generate page tab2

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

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author(s)

PaulHalliday
PaulHalliday
See author profile
Category:
Tutorial
Tags:
Angular

Still looking for an answer?

Ask a questionSearch for more help
Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Sign In or Sign Up to Comment
Creative CommonsThis work is licensed under a Creative Commons Attribution-NonCommercial- ShareAlike 4.0 International License.
Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Sign Up

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Learn more

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Learn more

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.

© 2025 DigitalOcean, LLC.Sitemap.