In this tutorial, you will learn, how to implement tabs in Ionic 4 from scratch. Most of the application uses the tabs component instead of the menu page. Tabs bring a rich look and feel for the mobile application. And it creates rich user experience also.

The list of Applications, which uses the tabs component in the mobile application.
1. Whatsapp
2. Instagram
3. etc

Tabs are a top-level navigation component to implement tab-based navigation. The component is a container of individual Tab components.

ion-tabs is a styleless component that works as a router outlet in order to handle navigation. This component does not provide any UI feedback or mechanism to switch between tabs

 

Preview of Inic 4 Tabs Example in the browser.

 

 

Implement tabs in Ionic 4 is not an easy task. It had more step. If you miss any these steps, then you will end up with some error. I made this tutorial to ease the complex process with a few steps. So follow the steps very carefully. Don't skip those steps, you are not familiar with it. If you find difficulties, ping me in github. I have given the git link at the end of this tutorial. Let's start to implement the tabs in Ionic 4 from scratch.

 

Step1.


Create an Ionic 4 project using the below command.

ionic start crm blank

After creating the project, go to the project root folder using the below command.

cd crm

 

Step2.

In this tutorial, we are going to land on a home page, which a default page. From the home page, we will move to the tabs page by using the click event.  In this example, we are going to show three pages as a tab component. To create the three pages using the below command.

ionic g page tab1
ionic g page tab2
ionic g page tab3

Now create a new page, which will act as a tabs root page, which is used to display the above three pages in a tabs style.

ionic g page tabs

 

Step3.
 

Go to tabs folder. Then create a new file under the tabs folder and name it as tabs.router.module.ts. And paste the below code in that file.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'tab1',
        children: [
          {
            path: '',
            loadChildren: '../tab1/tab1.module#Tab1PageModule'
          }
        ]
      },
      {
        path: 'tab2',
        children: [
          {
            path: '',
            loadChildren: '../tab2/tab2.module#Tab2PageModule'
          }
        ]
      },
      {
        path: 'tab3',
        children: [
          {
            path: '',
            loadChildren: '../tab3/tab3.module#Tab3PageModule'
          }
        ]
      },
      {
        path: '',
        redirectTo: '/tabs/tab1',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/tabs/tab1',
    pathMatch: 'full'
  }
];

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


Don't worry about the length of the code. It is nothing but a routing page for Tabs page. Here we creating a page URL for tab components. The path tab1, tab2, and tab3 are pointing the corresponding pages. You can modify it to your desired page to customize it if you want. You can modify the path names also. Instead of tab1, tab2, and tab3, you can give your desired names if you want. Don't modify the names, if you are trying for the first time the Ionic 4 tabs.

 

Step4.

 

Now open the tabs.module.ts file and import the TabsPageRoutingModule class.

import { TabsPageRoutingModule } from './tabs.router.module';

And add the class TabsPageRoutingModule to NgModule like below.

@NgModule({
 imports: [
  IonicModule,
  CommonModule,
  FormsModule,
  TabsPageRoutingModule
 ]

 

Step5.

 
Now open the tabs.page.html file and remove all the code in the tabs.page.html. After deleting the code, paste the below code in the tabs.page.html.

<ion-tabs>

 <ion-tab-bar slot="bottom">
  <ion-tab-button tab="tab1">
   <ion-icon name="flash"></ion-icon>
   <ion-label>Tab One</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab2">
   <ion-icon name="apps"></ion-icon>
   <ion-label>Tab Two</ion-label>
  </ion-tab-button>

  <ion-tab-button tab="tab3">
   <ion-icon name="send"></ion-icon>
   <ion-label>Tab Three</ion-label>
  </ion-tab-button>
 </ion-tab-bar>

</ion-tabs>

The ion-tab-button tag is used to integrate the tab page in Ionic 4. In the ion-tab-button tag, tab property points to the tab page component. You can modify these names if you gave a different name in the tabs.router.module.ts file. You can change the icons of the tabs also.

The ion-tab-bar had a slot properly. The slot propery had bottom as value. This will display the tab in the bottom of your application. If you want the tab to be in the top, use top as a value for the slot property

 

Step6.
 

Now open the home.page.html and create click event in the file with a button.

 <ion-item>
    <ion-label position="stacked">Username</ion-label>
    <ion-input></ion-input>
  </ion-item>

<ion-item>
    <ion-label position="stacked">Password</ion-label>
    <ion-input></ion-input>
  </ion-item>
<ion-button routerLink="/tabs" >Login</ion-button>


In this example, I used input fields and a login button. However, you need only a click event to navigate to the tabs page. The routerLink property is used to naviage the tabs page.


That's all. The tabs are done using the Ionic 4. 

 

You can get the full source code the Ionic 4 tabs using the below link.

https://github.com/bharathirajatut/ionic4/tree/master/tabs-example

 
Download APK

I made this tabs example as a APK file. You can download this apk and try it on your device. Get the APK and test it on your Android Device using the below URL

https://github.com/bharathirajatut/ionic4/raw/master/tabs-example/app-debug.apk

Tested Device:

Moto G4 Plus

You can download this apk and test it on your device. This apk is not harmful and it is not stealing any info. If you wanna try, please download install on your device. And you can try this without any worries.