Ionic refresh tab menu in real time - ionic-framework

Question

My app has a tab page:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home">
<ion-icon name="search-outline"></ion-icon>
<ion-label>Cerca</ion-label>
</ion-tab-button>
<ion-tab-button tab="inserimento">
<ion-icon name="add-circle-outline"></ion-icon>
<ion-label>Inserisci</ion-label>
</ion-tab-button>
<ion-tab-button tab="servizi">
<ion-icon name="shield-checkmark-outline"></ion-icon>
<ion-label>Servizi</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="this.messagginonletti == 0" tab="messaggi">
<ion-icon name="mail-outline"></ion-icon>
<ion-label>Messaggi</ion-label>
</ion-tab-button>
<ion-tab-button *ngIf="this.messagginonletti > 0" tab="messaggi">
<ion-icon name="mail-unread-outline"></ion-icon>
<ion-label>Messaggi</ion-label>
</ion-tab-button>
<ion-tab-button tab="account">
<ion-icon name="person-circle-outline"></ion-icon>
<ion-label>Account</ion-label>
</ion-tab-button>
where "messaggi" tab has 2 different values, one if this.messagginonletti variabile is 0 and another one if this.messagginonletti is > 0.
How can i refresh tab menu to update messagginonletti value? I retrieve this value using a function:
retrieveMessages() {
return new Promise((resolve =>{
this.accsPrvds.postData(‘test.php').subscribe((res:any)=>{
//console.log(res);
this.messagginonletti = res.success;
});
}));
}
the value of tab menu is set when app starts, but I don't know how to update (refresh) it

Answer 1

I don't know why it doesn't update, it should. You probably need to use ngZone where you are updating the data. But seems like the only thing that you change when this.messagginonletti changes is the icon of the tab. I wouldn't recommend changing the tab structure, only changing the icon here would suffice (or everything else that you want to change). so here is your fix:
<ion-tab-button tab="messaggi">
<ion-icon *ngIf="this.messagginonletti > 0" name="mail-unread-outline"></ion-icon>
<ion-icon *ngIf="this.messagginonletti == 0" name="mail-outline"></ion-icon>
<ion-label>Messaggi</ion-label>
</ion-tab-button>