I try to change the value of the badge if a notification comes, but I do not come to the exchange if you have an idea you could help me.
tabs.ts
import { Component, ViewChild } from '@angular/core';
import { SQLite, Dialogs, Firebase } from 'ionic-native';
import { NavController, Platform, Tabs } from 'ionic-angular';
import { HomePage } from '../home/home';
import { NotificationPage } from '../notification/notification';
import { MessagesPage } from '../messages/messages';
import { MoiPage } from '../moi/moi';
import {GlobalVars} from '../../providers/varglobal'
import {Injectable} from '@angular/core';
@Injectable()
@Component({
templateUrl: 'tabs.html'
})
export class TabsPage {
// this tells the tabs componnent which Pages
// should be each tab's root Page
@ViewChild('myTabs') tabRef: Tabs;
public database: SQLite;
public people: Array<Object>;
public home:any='';
tab1Root: any = HomePage;
tab3Root: any = NotificationPage;
tab4Root: any = MessagesPage;
tab5Root: any=MoiPage;
constructor(private platform:Platform,private nav:NavController,public lan: GlobalVars) {
this.platform.ready().then(() => {
Firebase.onNotificationOpen()
.subscribe(res => {
if(res.tap) {
// background mode
console.log(res.tap);
console.log(res);
} else if (!res.tap) {
// foreground mode
let num=parseInt(this.lan.getbadgeHome());
num=num+1;
alert(num+' home');
this.home=num;
alert(this.home);
}
});
});
}
tabs.html
<ion-tabs color="primary">
<ion-tab [root]="tab1Root" tabIcon="home" tabBadge={{"home"}} tabBadgeStyle="danger"></ion-tab>
<ion-tab [root]="tab4Root" tabIcon="mail" tabBadgeStyle="danger"></ion-tab>
<ion-tab [root]="tab5Root" tabIcon="person" ></ion-tab>
</ion-tabs>
In fact I manage to retrieve the notification and to increment the variable num and put it in the variable home but the value of the badge does not change
Given your example of your tabs, this should work:
<ion-tab [root]="tab1Root" tabIcon="home" tabBadge="{{tab1BadgeCount}}" tabBadgeStyle="danger"></ion-tab>
With a simple controller of:
export class TabsPage {
tab1Root: any = SomePage;
tab1BadgeCount : number = 0; // default 0
constructor() {
}
incrementBadgeCount(){
this.tab1BadgeCount = this.tab1BadgeCount+1;
}
decrementBadgeCount(){
this.tab1BadgeCount = this.tab1BadgeCount-1;
}
}
You can hook those methods up to a button to test.
However, I would recommend the use of Events to control the changing of the badge count, e.g.
export class TabsPage {
tab1Root: any = SomePage;
tab1BadgeCount : number = 0; // default 0
constructor(public events: Events) {
}
incrementBadgeCount(){
this.tab1BadgeCount = this.tab1BadgeCount+1;
this.publishBadgeCountUpdate();
}
decrementBadgeCount(){
this.tab1BadgeCount = this.tab1BadgeCount-1;
this.publishBadgeCountUpdate();
}
}
subscribeToBadgeCountChange(){
// Method to run when tab count changes
return this
.events
.subscribe("tabs-page:badge-update", this.refreshBadgeCount());
}
publishBadgeCountUpdate(){
// Call this method when you have changed the count
return this
.events
.publish("tabs-page:badge-update");
}
refreshBadgeCount(){
// This method will be called when incrementBadgeCount or decrementBadgeCount are executed.
// The beauty of the events approach is that you can cause a change to the tab count from any other view, without referencing the tabs page directly.
}
ionViewWillEnter() {
this.subscribeToBadgeCountChange();
}
}
As you can see in the docs tabBadge is not a input property and it is an attribute. So should be using as below
<ion-tab [root]="tab1Root" tabIcon="home" tabBadge="{{home}}" tabBadgeStyle="danger"></ion-tab>
Update :
Since you are assigning the value in the constructor you will not be able to get the updated value when it is changing. I need more information to fix this. One alternative way is to use a timeout function so that every 60seconds to check for the latest value as below
setInterval(function() {
this.platform.ready().then(() => {
Firebase.onNotificationOpen()
.subscribe(res => {
if(res.tap) {
// background mode
console.log(res.tap);
console.log(res);
} else if (!res.tap) {
// foreground mode
let num=parseInt(this.lan.getbadgeHome());
num=num+1;
alert(num+' home');
this.home=num;
alert(this.home);
}
});
}, 60 * 1000);
This will subscribe to the service and update your notification count.
tabBadge={{tab1BadgeCount}} with no doube quotes
and play with that parameter in you ts file.