Hide Badge when badge Value zero in Tabs

Ionic Framework ionic-v3
1

I am using the tabs template and using observables to dynamically set badges on tabs.
But when the value is zero I DO NOT want the badge show up.

For example:

  <ion-tab [root]="tab2Root" tabBadge="{{ badgeValue}}" tabTitle="History" tabIcon="ios-list-box"></ion-tab>

When the badgeValue is zero it still shows 0 in badge.

Is there a way I can hide it?

4 Likes
2

I used the ternary operator to solve it as follows

badgeValue>0 ? badgeValue : null
2 Likes
3 
[tabBadge] = "badgeValue>0 ? badgeValue : null"

Just for a novice like me. :]

10 Likes
4

Simpler:

tabBadge=“badgeValue || ‘’”

4 Likes
5

Why does this work though? In my app, badgeValue is default to 0. Why doesn’t the logic evaluate to 0, since badgeValue is not null or false?

Edit: I get it now, because 0 is false in JS. Fantastic.

1 Like
6

Anyone knows how to solve the same issue in v4? In v4 it shows 0 or nothing but never disappears. Do I need to use ngIf on badge to manually control ion-badge visibility based on value?

7

Use ngIf condition in Your badge tag. It’s working fine for me.