Overview

A quick how-to on showing a Material Badge in a Tab Title. This post assumes that you already have an Angular application with Material and want to add a Badge to a Tab Title <mat-tab>.

Show Badge in a Tab Label using ng-template

With the <mat-tab> tag use <ng-template> with the mat-tab-label instead of <mat-tab label=””> property.

The HTML code snippet below has two tabs. One with the title using the <mat-tab label=””> and the second using <ng-template mat-tab-label> wrapping a <span> tag that has the matBadge properties. The second is for a table and the number of users displayed in the badge.

<mat-tab-group animationDuration="0ms" >

  <mat-tab label="Edit User Form ">

    <update-user-form [UserID]="UserID" ></update-user-form>

  </mat-tab>

  <mat-tab>

    <ng-template mat-tab-label>
      <span matBadge="{{activeUsersCount}}" matBadgeColor="accent" matBadgeOverlap="false">
         Active Users Report
      </span>
    </ng-template>

    <users-table [RoleID]="RoleID">
</users-table>

  </mat-tab>

</mat-tab-group>

Inside the <ng-template mat-tab-label> tag is the matBadge, matBadgeColor, and matBadgeOverlap property.

<span matBadge="{{activeUserCount}}" matBadgeColor="accent" matBadgeOverlap="false">
  Active Users Report
</span>