//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() {
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter