Updating tab's badge dynamically with Ionic

Ionic Framework ionic-v3
1

Hi, I’m trying to update badge value by using event methode from a provider. It seems ok on Android but not on iOS.

Provider extract… (Event sender)

import { Events } from 'ionic-angular';

@Injectable()
export class theProvider{

     constructor( public events: Events ) { }

     oneProviderJob() {
     .
     .     
         // To update badge of pageTwo
         this.events.publish('cart:updated', 10); 
     .
     .
    }

}

And then we subscribe to that event in the tabs that contains both pages: (pageOne & pageTwo)
Notice that all pages are declered in an array… but why not?

import { Component } from '@angular/core';
import { Events } from 'ionic-angular';

@Component({...})
export class TabsPage {

  allTabs =[];

  constructor(public events: Events) {
       this.allTabs = [
            { root=FirstPage  title="Page one" badge=0 },
            { root=SecondPage  title="Page two" badge=0 }
       ]
       event.subscribe('cart:updated', _badgeValue => {
             this.allTabs[1].badge = _badgeValue;
       });
 }

}

And in the view:

<ion-header>
  <ion-navbar>
    <ion-title>Tabs</ion-title>
  </ion-navbar>
</ion-header>
<ion-tabs #myTabs>
  <ion-tab *ngFor="let tab of allTabs" [root]="tab.root" tabTitle="tab.title" tabBadge="tab.badge"></ion-tab>
</ion-tabs>

It is ok on Andoid devices.But, it does NOT OK on iOS ones.
On iOS, the bagge will be update only after that the SecondPage works on its view. (Update it)

I use the ionic release. (3.19.0)

Thanks in advance for your help.

2

Fire Angular change detection manually after you update, with ChangeDetectorRef.detectChanges().

3

or use [ngClass] to dynamically change display CSS properties of img file…
display: inline & display: none can dynamically switch by using ngClass.

4

Many thanks, AaronSterling !

This is my updated code. Now all is perfect, more reactive in Android also… :slight_smile:

import { Component, ChangeDetectorRef } from '@angular/core';
import { Events } from 'ionic-angular';

@Component({...})
export class TabsPage {

  allTabs =[];

   constructor(public events: Events, public detectorRef: ChangeDetectorRef) {
        this.allTabs = [
             { root=FirstPage  title="Page one" badge=0 },
             { root=SecondPage  title="Page two" badge=0 }
        ]
        event.subscribe('cart:updated', _badgeValue => {
              this.allTabs[1].badge = _badgeValue;
              detectorRef.detectChanges();
        });
  }
 
}
2 Likes
5

Thanks jamesharvey for hour help, unfortunately this is too high level for me … :frowning:

Nevertheless, I would like to understand your advises.
I understand the ng-class principle for hiding, showing, change display of elements in the page, but not for badges in Tabs. (Has I don’t have or don’t understand how to access to bages directly…)

I will really appreciate more explanation on this … to help me to progress on, as I am a beginner with ionic and not really aware of Angular…

1 Like