HI WELCOME TO KANSIRIS

Ionic 6 Angular Tabs Bar Navigation Tutorial

Leave a Comment

 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

ionic top tab bar navigation

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

Tabs bar navigation in Ionic

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.

Ionic 5|4 How to Add Tabs Bar Navigation in Ionic Angular Application

Leave a Comment

 In this post, we will add Tabs bar navigation in Ionic Angular application using the ion-tabs component directive. In a Tabbed navigation, each tab acts like a page which is navigated by tapping on tab panels.

This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12

Tab navigation proves very useful where we need to show a clean UI with some basic layout with easy accessibility. Tabs can be linked to some important pages which makes navigation system remains always visible to the user giving an idea about the current location.

We’ll be adding tab-based navigation in the Ionic application using the ion-tabs component. We will discuss an easy way to implement tabs bar on the bottom of the application layout.

 

Let’s get started!

 

Update Ionic CLI

Install the latest version of Ionic CLI by running the following npm command.

$ npm install -g ionic

 

Now create a new Ionic 5 Angular Application with a blank template by running the following command

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

 

Move to the application directory

$ cd ionic-tabs-navigation

 

Setup Application for Tabs

Now we will create some new tab pages linked with tab navigation and a tab bar page to keep routes for a navigation bar.

First, we’ll delete the Home page and run following generate command to create four new pages profiledashboardsettings and tablinks 

$ ionic generate page profile
$ ionic generate page dashboard
$ ionic generate page settings
$ ionic generate page tablinks

 

After removing the Home page and creating new pages for tabs the application structure will look like this.

 

Update App Routing Module

In the app-routing.module.ts file, remove the existing paths defined in the routesarray and update it with the TablinksPageModule as shown below

// app-routing.module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tablinks/tablinks.module').then(m => m.TablinksPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

 

Update Children Routes for Tabs

Now we’ll set up child routes in the tablinks-routing.module.ts file, with nested routing using children property to import modules of tabs pages profile, dashboard and settings.

// tablinks-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { TablinksPage } from './tablinks.page';

const routes: Routes = [
  {
    path: 'tablinks',
    component: TablinksPage,
    children: [
      {
        path: 'profile',
        loadChildren: () => import('../profile/profile.module').then(m => m.ProfilePageModule)
      },
      {
        path: 'dashboard',
        loadChildren: () => import('../dashboard/dashboard.module').then(m => m.DashboardPageModule)
      },
      {
        path: 'settings',
        loadChildren: () => import('../settings/settings.module').then(m => m.SettingsPageModule)
      },
      {
        path: '',
        redirectTo: '/tablinks/profile',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tablinks/profile',
    pathMatch: 'full'
  }
];

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

In the above code, we have defined children array for nested Routing for pages which will act like tabs.

Also defined an empty path with redirectTo property set to ‘/tablinks/profile’ so that profile component will be loaded by default when the app is started.

Adding Tabs Bar in Ionic Application

The tab navigation is created by adding the ion-tabs having ion-tab-bar inside it which creates a tab bar on position defined in the slot property.

Each tab button is created using the ion-tab-button with tab property which is the path of tab page resulting navigation.

We have set the navigation link in the tab property of the ion-tab-button element for the profiledashboard and settings pages with icons using the ion-icon and label in ion-label tag.

In the tablinks.page.html file replace the following code

<ion-tabs>

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

    <ion-tab-button tab="dashboard">
      <ion-icon name="easel-outline"></ion-icon>
      <ion-label>Dashboard</ion-label>
    </ion-tab-button>

    <ion-tab-button tab="settings">
      <ion-icon name="settings-outline"></ion-icon>
      <ion-label>Settings</ion-label>
    </ion-tab-button>
  </ion-tab-bar>

</ion-tabs>

 

Position the tabs on top

We can define the position of Navigation tabs bar by changing the property value of slot in the ion-tab-bar. By changing its value to ‘top’ will switch tabs bar on top of the application as shown in the image below:

<ion-tabs>

    <ion-tab-bar slot="top" color="primary">
        ...
        ...
    </ion-tab-bar>
  
  </ion-tabs>

 

That’s now we have implemented tabbed navigation on the bottom of the application to navigate using Angular lazy-loaded routing for each tab button

Now run the application by hitting $ ionic serve --o and you will see the application as shown in the image below.

 

Find source code in GitHub repo here.

 

Conclusion: During the implementation of tabbed navigation the tab navigation page which we created in the tablinks plays an important role. Using the nested navigation helps to create a tabs bar on bottom which will have its child routing.