How to create tabs in blank ionic 4 project

How to create tabs in blank project in Ionic 4

In this post we will learn about how can we add tabs in blank ionic project.

Step 1 :-
first create a blank ionic project using below command :-
ionic start myApp blank


Step 2 :-
now I am creating a page which name is "home" using below command :-
ionic g page home


Step 3 :-
now I will create 3 pages which name will be "profile", "notification", "setting" inside "home" folder using below command :-
ionic g page home/profile
ionic g page home/notification
ionic g page home/setting


Step 4 :-
now I will open "home.page.html" file and put tabs code :-

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="profile">
   <ion-label>Profile</ion-label>
   <ion-icon name=""></ion-icon>
</ion-tab-button>
<ion-tab-button tab="notification">
<ion-label>Notification</ion-label>
<ion-icon name=""></ion-icon>
</ion-tab-button>
<ion-tab-button tab="setting">
<ion-label>Setting</ion-label>
<ion-icon name=""></ion-icon>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>


Step 5 :-
now I will create "home-routing.module.ts" file manually inside "home" folder.

home-routing.module.ts :-

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

const routes:Routes=[
{
path:'',
redirectTo:'/home/tabs/profile',
pathMatch:'full'
},
{
path:'tabs',
component:HomePage,
children:[
{
path:'',
redirectTo:'/home/tabs/profile',
pathMatch:'full'
},
{
path:'profile',
loadChildren:'./profile/profile.module#ProfilePageModule'
},
{
path:'notification',
loadChildren:'./notification/notification.module#NotificationPageModule'
},
{
path:'setting',
loadChildren:'./setting/setting.module#SettingPageModule'
}
]
}
]

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


Step 6 :-
now I will import "HomeRoutingModule" inside "home.module.ts".

home.module.ts :-

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule,ReactiveFormsModule } from '@angular/forms';

import { HomePage } from './home.page';
import { HomeRoutingModule } from './home-routing.module';

@NgModule({
  imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
IonicModule,
HomeRoutingModule
  ],
  declarations: [HomePage]
})
export class HomePageModule {}


Step 7 :-
now I will comment "profile", "notification", "setting" pages routing from "app-routing.module.ts"

app-routing.module.ts :-

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

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  // { path: 'profile', loadChildren: './home/profile/profile.module#ProfilePageModule' },
  // { path: 'notification', loadChildren: './home/notification/notification.module#NotificationPageModule' },
  // { path: 'setting', loadChildren: './home/setting/setting.module#SettingPageModule' },
];

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