Badge directive with badgeDisabled condition not working

[urielzen]

Describe the bug

The following does not work when user.notifications changes value to/from zero.

<i class="pi pi-bell" pBadge [value]="user.notifications" [badgeDisabled]="user.notifications === 0"></i>

If the initial result from user.notifications === 0 is true, then the badge will remain hidden even if the value of user.notifications changes, so user.notifications === 0 result is updated to false, the badge is still hidden, but at that point should be shown.

Environment

PrimeNG 14.2.3

Reproducer

No response

Angular version

14

PrimeNG version

14.2.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.16.0

Browser(s)

Chrome

Steps to reproduce the behavior

No response

Expected behavior

badgeDisabled should reevaluate when a new value is passed to it.

[RedWings-R]

I have this bug too.

<li class="topbar-profile" pBadge [value]="nbNotifications.toString()" [badgeDisabled]="nbNotifications == 0">
    <button type="button" class="p-link" (click)="onProfileButtonClick()">
        <img src="assets/layout/images/avatar.png" alt="Profile" />
    </button>
</li>

If i remove the [badgeDisabled]="nbNotifications == 0" the value never change.

<li class="topbar-profile" pBadge [value]="nbNotifications.toString()">
    <button type="button" class="p-link" (click)="onProfileButtonClick()">
        <img src="assets/layout/images/avatar.png" alt="Profile" />
    </button>
</li>

onProfileButtonClick() {
    this.nbNotifications = this.nbNotifications++;
    // this.layoutService.showProfileSidebar();
}

[Triskae]

Yep same here ! Here's a repro repo.
Link

[ericvaroto]

Hello, i'm facing the same issue, cannot hide the badge in my notification icon.
Do you have any ideia when we will have the fix deployed?

Thanks

[diedel]

You can use the p-overlay-badge style class as a workaround:

<span class="p-overlay-badge">
    <i class="pi pi-bell"></i>
    <p-badge *ngIf="user.notifications > 0" [value]="user.notifications"></p-badge>
</span>

[riker09]

I confirm that the workaround provided by @diedel works. However, I would prefer the p-badge directive to work with dynamic values if that is possible. If not the documentation should receive at least a warning or hint of some kind so other developers don't have to find this GitHub issue first for a solution.