In this tutorial, we will add Tabs navigation in the Ionic 5 Angular application. By tapping on these tabs bar a user can navigate through different application pages by which can be switched using the Angular Routing mechanism.
This Angular post is compatible with Angular 4 upto latest versions, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12
Tabs based navigation provides quick access to major sections of an application like search product, cart, settings, and profile. Each tab page is a separate page/ component which is navigated defining lazy-loaded routing.
Let’s check how to quickly add Tabs navigation in an Ionic 5 Angular application.
Create a new Ionic 5 Application
Install the latest version of Ionic CLI by running following npm command:
$ npm install -g @ionic/cli
After updating the CLI package, we will create an Ionic Angular application with a blank template by running following npm command:
$ ionic start ionic-angular-tabs-demo blank --type=angular
Change the directory to application root:
$ cd ionic-angular-tabs-demo
In our blank template application, we already have Home page, so with that let’s create two new pages Profile and Settings by running following command:
$ ionic generate page profile
$ ionic generate page settings
Also create a new page tab-bar which will act as a Tab Navigation on which a user can tap to switch between Home, Profile and Setting page.
$ ionic generate page tab-bar
After creating pages above, the directory structure of our app will look like this:
Update TabBarPage
Routing and Template
The TabBarPage component plays a major role in adding tabbed navigation to the application.
In the ~tab-bar/tab-bar.page.html file, we will add ion-tabs
, ion-tab-bar
and ion-tab-button
ui components in the following structure:
<ion-tabs> <ion-tab-bar slot="bottom"> <ion-tab-button tab="home"> <ion-icon name="analytics"></ion-icon> <ion-label>Home</ion-label> </ion-tab-button> <ion-tab-button tab="profile"> <ion-icon name="person"></ion-icon> <ion-label>Profile</ion-label> </ion-tab-button> <ion-tab-button tab="settings"> <ion-icon name="settings"></ion-icon> <ion-label>Settings</ion-label> </ion-tab-button> </ion-tab-bar> </ion-tabs>
Each <ion-tab-button>
element act as a tab and the tab
attribute takes a routing path to navigate.
In the ~tab-bar/tab-bar-routing.module.ts file, we need to update the routing path and structure to use the children property which will have routing paths of tab pages as shown below:
// tab-bar-routing.module.ts import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { TabBarPage } from './tab-bar.page'; const routes: Routes = [ { path: 'tabs', component: TabBarPage, children: [ { path: 'home', children: [ { path: '', loadChildren: () => import('../home/home.module').then(m => m.HomePageModule) } ] }, { path: 'profile', children: [ { path: '', loadChildren: () => import('../profile/profile.module').then(m => m.ProfilePageModule) } ] }, { path: 'settings', children: [ { path: '', loadChildren: () => import('../settings/settings.module').then(m => m.SettingsPageModule) } ] }, { path: '', redirectTo: '/tabs/home', pathMatch: 'full' } ] }, { path: '', redirectTo: '/tabs/home', pathMatch: 'full' } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) export class TabBarPageRoutingModule { }
Update App Routing
Last by not least, in the main routing file which is the app-routing.module.ts file, we just need to load the TabBarPageModule as shown below which will take care of all other pages.
// app-routing.module.ts import { NgModule } from '@angular/core'; import { PreloadAllModules, RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: '', loadChildren: () => import('./tab-bar/tab-bar.module').then(m => m.TabBarPageModule) } ]; @NgModule({ imports: [ RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules }) ], exports: [RouterModule] }) export class AppRoutingModule { }
That’s it! Just run your application by executing the $ ng serve --open
command to tab navigation working 🙂
You can add any number of tabs that can adjust easily in a similar way.
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.