add notification badges to a mat-tab

Question

I am trying to add notification badge to a mat-tab similar to the image below ,

notification badge on top right of the tab

But I can't seem to find a way to do it on angular material tabs. Since the badges are being cut.

Here is a stackblitz example : https://stackblitz.com/edit/angular-eqlmkb-zzkrtg

is there a way to do it?

score 27 · Answer 1 · answered Oct 13 '20 at 04:18

27

You can create a custom label template for a mat-tab and put icons/badges etc in the label.

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <span matBadge="4" matBadgeOverlap="false">Label with Badge</span>
    </ng-template>
    Content
  </mat-tab>
</mat-tab-group>

answered Oct 13 '20 at 04:18

tomcheney

1,750
1
17
33

1

Don't forget to add the MatBadgeModule to the imports in app.module.ts and this will work – Sankofa May 18 '22 at 00:15

add notification badges to a mat-tab

1 Answers1