0

I have a component using angular material 9.

There are 3 tabs in my component.

  1. Completed
  2. Overdue
  3. Extended

I need Completed tab label background color as green, Overdue label background color as red and Extended background color as brown.

These 3 are the tabs.

Angular Material customize tab

I have tried this solution but it applies single color for all tabs. My expectation is one color per one particular tab. Please refer the below attached image.

This is the expected result

nimesh madusanka
  • 1
  • It will be helpful to answer if you create stackblitz demo and always add relevant code when you ask any question. :) – YogendraR Nov 13 '22 at 07:14
  • try adding "active" class when you choose a tab, so you have '.complete.active', '.overdue.active', '.extended.active', this way you can color each as you wanted – Jimmy Nov 13 '22 at 16:26

1 Answers1

1

you can use the nth of type selector to target the tab labels and set the background alternatively you can set aria-labels for individual tabs and target the label names

Example with nth of type selector

::ng-deep {
  .mat-tab-label {
    &:nth-of-type(1){
      background-color: green;
    }
    &:nth-of-type(2){
      background-color: red;
    }
    &:nth-of-type(3){
      background-color: brown;
    }
  }
}

Example with aria-label

<mat-tab-group>
  <mat-tab aria-label="completed" label="Completed"> Content 1 </mat-tab>
  <mat-tab aria-label="overdue" label="Overdue"> Content 2 </mat-tab>
  <mat-tab aria-label="extended" label="Extended"> Content 3 </mat-tab>
</mat-tab-group>

::ng-deep {
  .mat-tab-label {
    &[aria-label="completed"] {
      background-color: green;
    }
    &[aria-label="overdue"] {
      background-color: red;
    }
    &[aria-label="extended"] {
      background-color: brown;
    }
  }
}
Mr. Stash
  • 2,940
  • 3
  • 10
  • 24