'Angular material badge on mat-button-group css goes wrong

When I try add badge on mat-button-toggle-group only half of it is displayed.

please find the following 

<mat-button-toggle-group #filtergroup="matButtonToggleGroup" value="myCase">
    <mat-button-toggle value="myCase" matBadge="8" matBadgePosition="after">
        My Cases
    </mat-button-toggle>
    <mat-button-toggle>
        My Team
    </mat-button-toggle>
</mat-button-toggle-group>

https://stackblitz.com/angular/emrqojllmka?file=app%2Fbadge-overview-example.html

How can I make it display in a right way?

cssangular5angular-material-5


Solution 1:[1]

To avoid the cut-off you will need to override the overflow property on mat-button-toggle-group:

<mat-button-toggle-group #filtergroup="matButtonToggleGroup" value="myCase" style="overflow:visible">

However, the badge will still be overlapped by the adjacent button toggle. To get around that you need to raise the z-index of the badge class:

.mat-badge-content {
    z-index: 1;
}

Solution 2:[2]

G. Tranter's answer worked perfectly with the exception that the CSS had to use ng-deep

:host ::ng-deep .custom-mat-badge {
  .mat-badge-content {
    z-index: 1;
  }
}

Solution 3:[3]

You can use *ngIf="toggleValue" and also specify the css class you are using.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 G. Tranter
Solution 2 GForce Raab
Solution 3 waseem jan

Related Questions