How to set two different styles for label attribute in <mat-tab> in Angular 9?

Question

I have a requirement to set two different colors for label attribute in mat-tab. I have to show "ALERTS" text without background color and "3" number(here this number is dynamic) with background color RED.

<mat-tab label="ALERTS  3">.

Attached picture to understand better.

I couldn't apply background color RED for count.

<mat-tab class="whiteDivInfo" label="ALERTS {{alertsGridData.length}} ">
<mat-tab>

Answer 1

This below code solved my issue. <ng-template mat-tab-label> ALERTS <span style="float:right;width:20px;height:20px;line-height:20px;text-align:center;background-color:red;border-radius:25px;">{{Data.length}}</span> </ng-template>