typescript - Angular agregar múltiples insignias de Angular Material a un componente

¿Hay alguna manera de agregar múltiples insignias a un componente?

En este momento solo puedo tener una insignia a la vez, como en este ejemplo aquí:

<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>

Respuesta #1

He logrado superponer 2 insignias encapsulando elementos HTML, así:

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

Respuesta #2

La respuesta anterior es excelente. Sin embargo, si quieres evitar superposiciones, encontré que agregar elementos con Espacio Fijo ( ) junto a tu elemento objetivo funciona bien. Este enfoque es un poco improvisado, pero hace el trabajo. También te permite agregar varias insignias sin tener que anidar elementos.

<span matBadge="1" matBadgeOverlap="false"> sample text </span>
<span matBadge="2" matBadgeOverlap="false">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </span>

Este método separa las insignias para que no se superpongan, y puedes añadir más insignias fácilmente según sea necesario.

Por supuesto, también podrías usar estilos CSS para espaciar los elementos en lugar de espacios en blanco.