Is it possible to add a custom class to an Angular Material tab?

Question

In Angular 6, I am using Angular Material to display some data using Tabs.

<mat-tab-group>
    <mat-tab 
    *ngFor="let bar of foo.bar" 
    [label]="bar.Name"
    [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'">
      // ...
    </mat-tab>
  </mat-tab-group>

I would like to style the tabs differently whether the IsActive property of bar is true or false.

I have tried using [ngClass]="bar.IsActive ? 'bar-on' : 'bar-off'" as shown above, but the class is not added.

Out of spite, I have tried the much simpler class = 'bar-on' but even then the class is not added.

Therefore, I am wondering, is it possible to add a custom class to an Angular Material tab?

Edit: The IsActive property is a property of foo objects. It has nothing to do with the activated state of the tab. The active tab can display an object with IsActive = false and vice-versa.

Answer 1

Yes its possible by using ng-template instead of label.

Example of ngClass on first tab. stackblitz

<mat-tab-group>
  <mat-tab > 
   <ng-template mat-tab-label>
                <span [ngClass]="{'color-red': isError?'red':'black'}">Security</span>
   </ng-template>
    Content 1 
   </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>