Is it possible to add a custom class to an Angular Material tab?
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>
If you want to modify the active tab, use this:
.mat-tab-label-active { //your style here}If you want to modify the label style within the active tab, do this:
.mat-tab-label-active .mat-tab-label-content { //your style here }