Angular Material: How can I use 2 badges at the same time

Issue

I want to place two badges in the top right. For this I use Angular Material. I managed it with a badge. But how do I manage it with two badges? It should look like that:

Current Code: https://stackblitz.com/edit/stackblitz-starters-fdcabz?file=src%2Fmain.ts

Solution

You need multiple badges, you can use position: absolute; for the child element, to keep it out of range. Also below CSS needed for the output!

css

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

.card-badges {
  width: 300px;
  height: 200px;
  background: gray;
  border: 2px solid #000;
}
.card-badges > .mat-badge-content {
  margin-right: 20px;
}
.card-badges > .mat-badge-content {
  margin-right: 20px;
}
.inner-badge {
  position: absolute;
  right: 60px;
}
.inner-badge > .mat-badge-content {
  background-color: #3f51b5 !important;
}

ts

import { Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { MatBadgeModule } from '@angular/material/badge';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MatBadgeModule],
  template: `
    <div class="card-badges"
    matBadge="12" matBadgeOverlap="true" matBadgeColor="warn" matBadgePosition="after">
    <span class="inner-badge"
    matBadge="10" matBadgeOverlap="true" matBadgeColor="primary"></span>
    Card
  </div>
  `,
})
export class App {
  name = 'Angular';
}

bootstrapApplication(App);

stackblitz

Answered By - Naren Murali