CODEWITHSUNDEEP
ionic2
duc
duc

Reputation: 2987

Ionic 2 Tab view not update tabBadge when model change but only update when click on the tab

I have this code that show the tabBadge number

<ion-tabs selectedIndex="{{activeTab}}">
    <ion-tab [root]="tabThongBaoPage" tabIcon="notifications" [tabBadge]="badge.getBadge()" tabBadgeStyle="danger"></ion-tab>
</ion-tabs>

and the service controller the bag number

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import CONST from '../variable';
@Injectable()
export class BadgeSinhService {
    badge: number = 0;
    constructor() {
    }
    getBadge(): number {
        return this.badge;
    }
    setBadge(badge): number {
        this.badge = badge;
        return this.badge;
    }
    incrementBadge() {
        this.badge++
        return
    }
    decreaseBadge() {
        if (this.badge > 0) {
            this.badge--
        }
        return;
    }
}

If I click on the button with event like this

<button ion-button (click)="cong()">Cong</button>
<button ion-button (click)="tru()">Tru</button>

cong() {
      this.badge.incrementBadge()
  }
tru() {
    this.badge.decreaseBadge()
  }

The tabBadge number updated on the view, as soon as the button is click and the click event is fire

But I also have this code that wait for notification event, that will be fire when the server send a notification to the app, it will increment the tab badge number

 push.on('notification', (data) => {
        console.log('notifi updatei');
        this.badge.incrementBadge();
      })

It does increment the tab badge number but the view is not update, only when I tap on the tab then the badge number will update on the view

Why it not update the view like the click event ?

Upvotes: 1

Views: 657

Answers (1)

duc
duc

Reputation: 2987

I found the answer,use ngZone to notifi angular2 to update the view 

push.on('notification', (data) => {
        console.log('notifi updatei');
        this.badge.incrementBadge();
      })

somehow the code above not create a async task in angular 2 zone, maybe because push.on not belong to angular 2

but the answer is

this.zone.run(() => {
 // increment badge
})

Upvotes: 2

Related Questions