Adding Tabs Navigation in Ionic 7 Angular Application

In this Ionic Angular Tabs tutorial, we are going to learn, 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 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.

Set up Ionic Project

Install the latest version of Ionic CLI using following command.

Make sure to enter admin password after invoking the below command:

sudo npm install -g ionic@latest

Create a brand new blank Ionic Angular 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

Run the below command to add the native core package.

npm install @ionic-native/core --legacy-peer-deps

Disable Strict Type Errors

To avoid TypeScript compiling issues, we just need to open tsconfig.json file:

First, set below property under “compilerOptions” property.

"compilerOptions": {
    "strictPropertyInitialization": false,
    "skipLibCheck": true
    ...
}

Secondly, add given props under “angularCompilerOptions”.

"angularCompilerOptions": {
    "strictTemplates": false,
    ...
}

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 TabnavPageModule with the blank path as displayed below.

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabnav/tabnav.module').then(m => m.TabnavPageModule)
  }
];

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

export class AppRoutingModule { }

Next, open the tabnav.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 { TabnavPageRoutingModule } from './tabnav-routing.module';

import { TabnavPage } from './tabnav.page';

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

const routes: Routes = [
  {
    path: 'tab-nav',
    component: TabnavPage,
    children: [
      {
        path: 'dashboard',
        loadChildren: () =>
          import('../dashboard/dashboard.module').then(
            (m) => m.DashboardPageModule
          ),
      },
      {
        path: 'products',
        loadChildren: () =>
          import('../products/products.module').then(
            (m) => m.ProductsPageModule
          ),
      },
    ],
  },
  {
    path: '',
    pathMatch: 'full',
    redirectTo: '/tab-nav/dashboard',
  },
];

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

export class TabnavPageModule {}

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
‘/tab-nav/dashboard’ so when the TabnavPage page loads or the app starts, it will load the given path.

Implement Tabs Menu in Ionic

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 ‘/tab-nav/dashboard’ path will open and if the user clicks on either of the tabs will be redirected to related page.

Test Ionic Tab Navigation

To test the Ionic tab navigation menu, you have to install the ionic lav tool as a dev dependency, then execute the command to serve the app.

npm install @ionic/lab --legacy-peer-deps

ionic serve --lab

You may also use the simple command to run the ionic development server:

ionic serve

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.