Angular Material - Empty Badge
Use [matBadgeHidden] = "true"
for dynamically control visibility of matBadge
,
e.g.:
<span [matBadgeHidden] = "commentCount == 0" [matBadge]="commentCount" matBadgeColor="warn" matBadgeOverlap="false">Comments</span>
In looking at the source for the badge component, it looks like this is by design due to lines:
'[class.mat-badge-hidden]': 'hidden || !_hasContent',
...
this._hasContent = value != null && `${value}`.trim().length > 0;
It does look like you can use matBadge="​"
to have an empty badge show to work around this.
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>