CODEWITHSUNDEEP
angularangular-materialangular-material2
nimesh madusanka
nimesh madusanka

Reputation: 1

How to change background color of angular material tabs

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

Upvotes: 0

Views: 1727

Answers (1)

Mr. Stash
Mr. Stash

Reputation: 3160

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;
    }
  }
}

Upvotes: 1

Related Questions