Adding Tabs Navigation in Ionic 4 and Angular App

Adding Tabs Navigation in Ionic 4 and Angular App

This Ionic tabs navigation tutorial explains how to add tabs navigation in Ionic 4 and Angular App. How to work with Angular routing and configure routing in Ionic and Angular Tabs. How to add tabs and how to enable navigation in Tabs using Angular Routing to communicate between pages in Ionic 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 Navigation in Ionic 4

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 [email protected]

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Install Angular - Angular Environment Setup Process

Install Angular in easy step by step process. Firstly Install Node.js & npm, then Install Angular CLI, Create workspace and Deploy your App.

Pros and Cons of Ionic Development

If you think Ionic is the right cross-platform application development, here are a few pros and cons of Ionic development. 

Ionic 5 Tutorial: Create Offline Price Checker (Angular 9)

In this Ionic 5 tutorial, we will create an offline price checker using SQLite, Barcode Scanner, and Angular 9. The price checker usually uses by the store or retail business to check the actual price of the item, product, or goods. So, inside this app will contain an SQLite database table of products that have fields id, price look-up (PLU) or product code, barcode, product name, product description, and product sell price.

Angular 9, Ionic 5, React Navigation 5 - Web Dev Update February 2020

Here's an update on what's important in web development! Angular 9, Ionic 5, React Navigation 5 and more - I'll bring you up-to-date with what you need to know!

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc