How to update Ionic 2 Tabs Badges

Ionic Framework ionic-v3
1

my tabs.ts

import { Component } from '@angular/core';

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';
import { SaerchPage } from '../saerch/saerch';
import { SigninPage } from '../signin/signin';
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = CartPage;
  tab4Root: any = SaerchPage;
  tab5Root: any = SigninPage;
  countCarItem = window.localStorage.getItem('countCartItem') ? window.localStorage.getItem('countCartItem') : '';

}

tabs.html

<ion-tabs selectedIndex="2">
  <ion-tab [root]="tab5Root"  tabIcon="ios-contact-outline"></ion-tab>
  <ion-tab [root]="tab2Root"  tabIcon="ios-apps"></ion-tab>
  <ion-tab [root]="tab1Root"  tabIcon="home"></ion-tab>
  <ion-tab [root]="tab4Root"  tabIcon="ios-search"></ion-tab>
  <ion-tab [root]="tab3Root" [tabBadge]="countCarItem" tabIcon="md-cart"></ion-tab>
</ion-tabs>
2

Try

countCarItem() {
    return window.localStorage.getItem(...)...
}

... [tabBadge]="countCarItem()" ...
1 Like
3

Thank you very much for solving the problem :+1:

1 Like
4

Perfect! Thank you. So simple. That’s how it should be.