Hide Badge when badge Value zero in Tabs


#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?


#2

I used the ternary operator to solve it as follows

badgeValue>0 ? badgeValue : null

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

Just for a novice like me. :]


#4

Simpler:

tabBadge=“badgeValue || ‘’”


#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.