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