Angular add multiple Angular Material Badges to a component

user_10084505 0
Viewed 711

is there a way to add multiple badges to a component?

At the moment I am only able to have one badge at a time like this example here:

<mat-card [ngClass] = "{'custom-card':true}" [matBadge] ="folderContent.length" matBadgePosition="after" matBadgeSize="large" matBadgeColor="accent" matBadgeOverlap="true" >
    
    <mat-card-title>{{folderCaption}}</mat-card-title>
    <mat-card-subtitle>{{folderSubtitle}}</mat-card-subtitle>
    <mat-card-content>{{folderDescription}}</mat-card-content>

</mat-card>
angular-material angular typescript
1 Answers

I've managed to overlap 2 badges by encapsulating HTML elements, like this :

<div matBadge="4" matBadgeOverlap="false" matBadgePosition="below before"
           matBadgeSize="small">
    <div matBadge="2" matBadgeColor="accent" matBadgePosition="below before"
           matBadgeSize="small">
        Some text
    </div>
</div>

enter image description here

user_25508190
Related