Angular 7 : Use different background + hover color for each tabs

Question

I am working on Angular 7. For tab I have used Tabset. I want to use different colors for each tabs for background and hover effect both.

Here is code:

 <div class="card-body md-tabs">
<ngb-tabset (tabChange)="fun($event.nextId)">
  <ngb-tab id="BasicInfo" style="color: #004d40 !important;">
    <ng-template ngbTabTitle class="tab-title tab">
      <span style="color: #004d40;font-size: 16px;font-weight: bold;"><i
          class="icofont icofont-home"></i>&nbsp;&nbsp;Basic Information</span>
    </ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab style="background-color: red" id="Supplier">
    <ng-template ngbTabTitle><span style="color: #e65100;font-size: 16px;font-weight: bold;"><i
          class="fa fa-money"></i>&nbsp;&nbsp;Supplier</span></ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab style="background-color: red" id="Tax">
    <ng-template ngbTabTitle><span style="color: #e65100;font-size: 16px;font-weight: bold;"><i
          class="fa fa-money"></i>&nbsp;&nbsp;Tax</span></ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab id="Terms">
    <ng-template ngbTabTitle>
      <span style="color: #1a237e;font-size: 16px;font-weight: bold;"><i
          class="fa fa-book"></i>&nbsp;&nbsp;Terms</span>
    </ng-template>

    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab id="Misc">
    <ng-template ngbTabTitle>
      <span style="color: #bf360c;font-size: 16px;font-weight: bold;"><i
          class="fa fa-file-text"></i>&nbsp;&nbsp;Miscellaneous</span>
    </ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
  <ngb-tab id="Graph">
    <ng-template ngbTabTitle>
      <span style="color: #01579b;font-size: 16px;font-weight: bold;">
        <i class="fa fa-bar-chart"></i>&nbsp;&nbsp;Graph View
      </span>
    </ng-template>
    <ng-template ngbTabContent>
      <div [@fadeInOutTranslate] class="m-t-15">

      </div>
    </ng-template>
  </ngb-tab>
</ngb-tabset>
</div>

Is there any way? Anyone can help for this?

Answer 1

::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label:first-child  {
  color:red;
  background-color: green;
}

::ng-deep .mat-tab-list .mat-tab-labels .mat-tab-label:first-child:hover  {
  color:green;
  background-color: red;
}

StackBlitz: https://stackblitz.com/edit/angular-jggy2s

Answer 2

Mouseenter, mouseleave. Here is a simple and basic example: https://stackblitz.com/edit/angular-obcut6

Answer 3

Can you be a little more specific of what exactly you're trying to achieve?

Sounds to me like an encapsulation issue, try moving your styles to the global styles.scss file or add encapsulation: ViewEncapsulation.None to your host component's metadata (the component that has the tabs in its template)