[Ionic 5] Tabs are Autofreshing with Data update

I have the code below … you’ll see two boolean values that show an ion-badge if true. Problem is … if the values are updated the tabs are reset to screen 0.

Both Variables are set from a subscribe to a service variable. It is updated based on data changing in the database. How do I prevent the Tabs from resetting when the data is changed?

`<ion-tabs *ngIf=“userStatus !=‘suspend’”>



<ion-tab-button tab="matches" title="Matches">
  
     <ion-icon   name="heart-outline" style="pointer-events: none;"></ion-icon>
     <ion-badge color="danger" *ngIf="hasNewMatches"></ion-badge>
     
 
</ion-tab-button>

<ion-tab-button tab="chat-list" title="Messages">
  <ion-icon name="chatbubble-outline"  style="pointer-events: none;"></ion-icon>
  <ion-badge color="danger" *ngIf="newMessageCount">{{ newMessageCount }}</ion-badge>
  
</ion-tab-button>
<ion-tab-button tab="settings" title="Settings">
  <ion-icon name="settings-outline"  style="pointer-events: none;"></ion-icon>
</ion-tab-button>
`

What happens if you remove the *ngIf expression on the <ion-tabs> itself?

It works if remove the ngIf … Now that mention this … I am going to try ngShow instead. if this works I will be so upset. 3 weeks with this issue.

I don’t think ngShow exists in modern Angular. Much simpler to just bind [attr.hidden] or [class.invisible] combined with a display: none CSS rule.

yes … sorry I meant [hidden]. I used that instead …and it worked. Lesson learned. ngIf changes the DOM and [hidden] just changes the CSS so there is no need for a repaint.

However… I still find it odd that on the repaint it changes the currently selected Tab. BUT! Its working, so I am happy.

Thanks!

Look at it from the POV of the framework. Every time the *ngIf flips to true, the <ion-tabs> component has to be constructed from scratch, and it has no way of knowing any of the properties of its previous incarnation, who died leaving no traces long ago.

Another option, I suppose, would be for your to actively bind [(selectedTab)] off of the <ion-tab-bar> to a property in your page’s controller. That should survive an *ngIf on/off cycle.

1 Like