Ionic 4 ion-tabs-let’s Code and Learn .

In your tabs page html : -
<ion-tabs (ionTabsDidChange)=”ionTabsDidChange()”>

<ion-tab-bar slot=”bottom”>

<ion-tab-button tab=”jobs”>

<ion-icon name=”calendar”></ion-icon>

<ion-label>Jobs</ion-label>

</ion-tab-button>

<ion-tab-button tab=”profile”>

<ion-icon name=”person-circle”></ion-icon>

<ion-label>Profile</ion-label>

</ion-tab-button>

<ion-tab-button tab=”profile”>

<ion-icon name=”map”></ion-icon>

<ion-label>Profile</ion-label>

</ion-tab-button>

</ion-tab-bar>

</ion-tabs>

In your tabs routing page : -

import { NgModule } from ‘@angular/core’;

import { Routes, RouterModule } from ‘@angular/router’;

import { TabsPage } from ‘./tabs.page’;

const routes: Routes = [

{

path: ‘tabs’,

component: TabsPage,

children:

[

{

path: ‘jobs’,

children:

[

{

path: ‘’,

loadChildren: () => import(‘../jobs/jobs.module’).then( m => m.JobsPageModule)

}

]

},

{

path: ‘profile’,

children:

[

{

path: ‘’,

loadChildren: () => import(‘../profile/profile.module’).then( m => m.ProfilePageModule)

}

]

},

{

path: ‘’,

redirectTo: ‘tabs/jobs’,

pathMatch: ‘full’

}

]

},

{

path: ‘’,

redirectTo: ‘tabs/jobs’,

pathMatch: ‘full’

}

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule],

})

export class TabsPageRoutingModule {}