Ionic 6 Angular Tabs Bar Navigation Tutorial

 Ionic Tabs Bar navigation tutorial; During, this example you ascertain how to integrate custom tabs bar navigation in an Ionic Angular application.

Tab navigation amplifies the user-experience; the navigation bar stays in the bottom or at the top position, relatively in the viewport.

A user may tap or click on the menu item to navigate to pages, and it makes the navigation facile by keeping the user-friendliness intact.

In this thorough guide, we demonstrate how to add tab navigation in the ionic app, additionally share how to quickly change the tab bar position and display the tab bar on the top part.

This way, you will make the navigation bar profoundly scannable, impeccable and help your users to navigate between pages swiftly.

How to Add Tabs Bar Navigation in Ionic 6 Angular App

• Step 1: Create Ionic Application
• Step 2: Create Pages
• Step 3: Add Tabs Route in App Routing Module
• Step 4: Create Tabs Child Routes
• Step 5: Integrate Tabs Bar in Ionic
• Step 6: Change Tab Bar Position
• Step 7: Start Development Server

Create Ionic Application

The latest version of the Ionic command-line interface (CLI) tool is a mandatory tool for creating ionic apps. Use the npm command to install it globally.

npm install -g @ionic/cli

Bash

We use the most preferred method for installing an ionic app that is through command-line utility.

Ionic offers ready-made app templates such as blank, tabs, and side menu; however, we create the blank ionic, angular app using the ionic start command.

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

Bash

After installing the new app; head over to the app folder:

cd ionic-tabs-navigation-app

Bash

Remove Type Errors

You have to remove strict type errors make sure to set “strictTemplates”: false in angularCompilerOptions in tsconfig.json file.

Create Pages

Next, you require to use the ionic generate command to create tab navigation pages; these pages will be accessed by adding routes.

Ionic comes with a Home page; we don’t need that delete it and generate About, Blog, Contact and TabNav pages.

ionic generate page about
ionic generate page blog
ionic generate page contact
ionic generate page tabnav

Bash

We will make the TabNav page the locus of the Tabs bar navigation and keep the tab nav related code.

Add Tabs Route in App Routing Module

Head over to the main App routing module class, take away the routing class’s current routes, however, keep the TabnavPageModule intact.

Update app-routing.module.ts file:

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

TypeScript

Create Tabs Child Routes

Subsequently, we will make it the main routing file hence create all the routes as nested routes by adding the the pages inside the children array.

We declared the ‘/tabs/about’ path into the redirectTo="" property, the application brings the about page on the view when invoked.

Update tabnav-routing.module.ts file:

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

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

const routes: Routes = [
  {
    path: 'tabs',
    component: TabnavPage,
    children: [
      {
        path: 'about',
        loadChildren: () => import('../about/about.module').then(m => m.AboutPageModule)
      },
      {
        path: 'blog',
        loadChildren: () => import('../blog/blog.module').then(m => m.BlogPageModule)
      },
      {
        path: 'contact',
        loadChildren: () => import('../contact/contact.module').then(m => m.ContactPageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/about',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/about',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})

export class TabnavPageRoutingModule {}

TypeScript

Integrate Tabs Bar in Ionic

In the last step, you will implement or add tabs bar navigation using the ion-tab-bar attribute; using the slot property, and you can define the tabs bar navigation position.

The ion-tab-button attribute takes tab property; in the tab prop, you can declare the route for enabling navigation similarly we passed about, blog, and contact pages links.

The ion-icon attribute is used to create an icon, and you can also check the ionicons for adding various other icons.

Update tabnav.page.html file:

<ion-tabs>

  <ion-tab-bar slot="bottom">
    <ion-tab-button tab="about">
      <ion-icon name="person-circle-outline"></ion-icon>
      <ion-label>About</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="blog">
      <ion-icon name="albums-outline"></ion-icon>
      <ion-label>Blog</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="contact">
      <ion-icon name="call-outline"></ion-icon>
      <ion-label>Contact</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

Markup

Change Tab Bar Position

You can change the ionic tab bar navigation component’s position; in the previous example, we displayed the tab bar at the bottom. Now, you will see how to display the tab bar on the top, just use the slot property and define it at the top position.

<ion-tabs>

  <ion-tab-bar slot="top">
    ...

    ...

    ...
  </ion-tab-bar>

</ion-tabs>

Markup

Start Development Server

Now, the time comes to test the app on the browser. It is easy to run the app, and you may use the ionic lab package or ionic serve command to start the ionic app.

npm i @ionic/lab --save-dev

ionic serve -l

Bash

Or you can also use:

ionic serve

Bash

Furthermore, you can run the app on the virtual or real mobile device.

Conclusion

Ionic Tabs bar navigation tutorial is completed; in this tutorial, we had a chance to create custom tabs bar navigation components in ionic, angular application.

We went through the concept of ionic children and nested routes for adding tabs bar navigation.

Lastly, we saw how to change the tabs bar position in the ionic app using the slot property.