Questions Tags Users Badges

add notification badges to a mat-tab

Created May 18, 2020 Edited May 18, 2020

Viewed 3868

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?

mat-tab angular-material angular badge css

1 Answers

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>

edited Oct 13, 2020

user_11411490

answered Oct 13, 2020

Related