CODEWITHSUNDEEP
cssangularangular-material
FranciscoFJM
FranciscoFJM

Reputation: 151

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

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>

Upvotes: 1

Views: 1288

Answers (1)

Aviad P.
Aviad P.

Reputation: 32629

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

Upvotes: 1

Related Questions