Adding Tabs Navigation in Ionic 4 and Angular App

In this Ionic 4 Angular 8 Tabs tutorial, we are going to learn today, how to add tabs and how to enable navigation in Tabs using Angular Routing to communicate between pages in Ionic Angular app.

Tabs are a navigation element, and almost every mobile application uses the tabs navigation component to add the rich user experience in the mobile app.
Tabs elements help users to navigate between various pages easily, and users can quickly travel in the different areas in the app by just clicking a tab element.

In Ionic 4 Tabs are considered to be the top-level navigation component and helps to add tab-based navigation. The ion-tabs component is a router outlet without having a particular style.

Table of Contents

• Set up Ionic Project
• Configure Nested Routes for Tabs
• Adding Tabs in Ionic 4
• Conclusion

Set up Ionic 4 Project

Install the latest version of Ionic CLI using following command:

npm install -g ionic@latest

Create a brand new blank Ionic 4 Angular 8 Tabs project using the following command:

ionic start ionic-angular-tabs-navigation blank --type=angular

Get inside the project using below command:

cd ionic-angular-tabs-navigation

Start the app app in the browser using below command:

ionic serve

Configure Nested Routes for Tabs

We need to create some pages to enable the nested navigation in Ionic tabs with Angular routes, run the following commands in the terminal.

First, start with deleting the home page and then create three new pages tabsnav, dashboard and products pages.

Let’s get started!

ng generate page tabnav
ng generate page dashboard
ng generate page products

Open the app-routing.module.ts file and remove all existing paths defined in the routes Array and set explicitly TabsnavPageModule with the blank path as displayed below.

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

const routes: Routes = [
  {
    path: '',
    loadChildren: './tabsnav/tabsnav.module#TabsnavPageModule'
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Next, open the tabsnav.module.ts file and implement the nested routes or children routes in Ionic app as shown below.

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

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

import { TabsnavPageRoutingModule } from './tabsnav-routing.module';
import { TabsnavPage } from './tabsnav.page';

const routes: Routes = [
  {
    path: 'tabs-nav',
    component: TabsnavPage,
    children: [
      {
        path: 'dashboard',
        loadChildren: '../dashboard/dashboard.module#DashboardPageModule'
      },
      {
        path: 'products',
        loadChildren: '../products/products.module#ProductsPageModule'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs-nav/dashboard'
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    TabsnavPageRoutingModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabsnavPage]
})

export class TabsnavPageModule { }

In the above code, we imported Routes and RouterModule at the top and created the routes array. We declared the children routes for dashboard and products paths.

We also configured the blank path with redirectTo property and set it to
‘/tabs-nav/dashboard’ so when the TabsnavPage page loads or the app starts, it will load the given path.

Adding Tabs in Ionic 4

The ion-tab-bar is defined as a child of ion-tabs and most often works together However they do not rely on each other. Ionic tabs work as similar as a native app component.

Open the tabsnav.page.html file and replace the existing code with the following code.

<ion-content>

  <ion-tabs>
    <ion-tab-bar slot="bottom">
      <ion-tab-button tab="dashboard">
        <ion-icon name="speedometer"></ion-icon>
        <ion-label>Dashboard</ion-label>
      </ion-tab-button>

      <ion-tab-button tab="products">
        <ion-icon name="list"></ion-icon>
        <ion-label>Products</ion-label>
      </ion-tab-button>
    </ion-tab-bar>
  </ion-tabs>

</ion-content>

In the above code we placed the ion-tab-bar inside the ion-tabs directive, to pass the page url in Ionic tabs. We declared the tab=”dashboard” and tab=”products” with the ion-tab-button button to configure the tabs navigation.

By default ‘/tabs-nav/dashboard’ path will open and if the user clicks on either of the tabs will be redirected to related page.

Conclusion

Finally, we have completed the Ionic tabs navigation tutorial. In this tutorial, we understood how to work with Angular routing and configure routing in Ionic and Angular Tabs. You can also go with starter template if you want to know more about tabs.

#Ionic #Angular