//tabs page html <ion-tabs> <ion-tab-bar slot="bottom"> <ion-tab-button tab="home"> <ion-icon name="home-outline"></ion-icon> <ion-label>Home</ion-label> </ion-tab-button> <ion-tab-button tab="cart"> <ion-fab>{{numCartItems}}</ion-fab> <ion-icon name="cart-outline"></ion-icon> <ion-label>Cart</ion-label> </ion-tab-button> </ion-tab-bar> </ion-tabs> //tabs routing module ts 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: 'home', loadChildren: () => import('./home/home.module').then(m=> m.HomePageModule) }, { path: 'cart', loadChildren: () => import('./cart/cart.module').then( m => m.CartPageModule) } ] }, { path: '', redirectTo: '/tabs/home', pathMatch: 'full' }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule], }) export class TabsPageRoutingModule {} //Additional code //tabs page ts import { Component, OnInit } from '@angular/core'; import { SubscriptionCartOrganiserService } from '../services/SubscriptionCartOrganiserService'; @Component({ selector: 'app-tabs', templateUrl: './tabs.page.html', styleUrls: ['./tabs.page.scss'], }) export class TabsPage implements OnInit { numCartItems : number = 0; constructor(private cartManager : SubscriptionCartOrganiserService) { this.numCartItems = cartManager.getNumberOfItemsInCart(); cartManager.cartProductsNumberDS.subscribe(num => { this.numCartItems = num; }); } ngOnInit() { } }