Angular Material: Different style for each tab in a mat-tab-group?

user_12190718 0
Viewed 437

I have a mat-tab-group with 3 tabs, and i would like for each tab to have a different text color and also change te color of the blue outline at the bottom. Is this even possible? If so, can you give me an idea on how to do this?

This is the default look the tabs have in my app: enter image description here

And this is how i would like them to look:

enter image description here

The code for the tabs:

  <mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)" [(selectedIndex)]="matTabSeleccionada">

                <mat-tab class="" label="Total">

                </mat-tab>

                <mat-tab class="" label="Bayer">

                </mat-tab>

                <mat-tab class="" label="Monsanto">

                </mat-tab>

            </mat-tab-group>
angular-material angular css
1 Answers

Angular material supports styling the label with a template, see this Stackblitz

<mat-tab-group>
  <mat-tab label="First">
    <ng-template mat-tab-label>
      <span class="red-bold">zzzzz</span>
    </ng-template>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

Result:

enter image description here

user_2356480
Related