Angular Material - Empty Badge
I'm currently adding badges to the buttons of the menu of my application, which already works fine. I want to display the number of notifications the user still has to look at like this:
<span matBadge="4" matBadgeColor="warn">Look at these notifications!</span>
On a mobile phone though, the menu is hidden behind a burger icon. I don't want the user to show how many notifications he has on top of this icon. I only want him to know that he has some, and when he opens the menu, he will see a badge with the number of notifications on the various buttons.
My problem is that an empty badge is always hidden. I can't seem to show it like this:
<span matBadge="" matBadgeColor="warn">Look at these notifications!</span>
Is it not possible at all to show an empty badge? Am I missing something, or is this behaviour by design?
Answer
You will have to add a class for yourself to hide the text. The mat-badge has no functionality to hide the content. White space or will not work:
.mat-badge.hide-text .mat-badge-content {
color: transparent;
}
<span matBadge="0" matBadgeColor="warn" class="hide-text">Look at these notifications!</span>
Update:
If you really don't want to use a class, you can use the ⁠. This is a so called WORD JOINER. Mileage may vary with Angular version :), but this will print an empty badge
<span matBadge="⁠" matBadgeColor="warn">Look at these notifications!</span>