angular - There is way to set different underline color for each mat-tab?

Question

I have material angular mat-tab component, i would like to set a different underline color for each mat-tab, i tried to use backgroundColor and selectedTabChange properties but i can't manage that

<mat-tab-group backgroundColor="green" mat-align-tabs="center" dynamicHeight headerPosition="below" (selectedTabChange)="onTabChanged($event)">
            <mat-tab label='IPV Model'>Content</mat-tab>
            <mat-tab label='IPV Market Data'>Content</mat-tab>
            <mat-tab label='Collateral'>Content</mat-tab>
            <mat-tab label='Fair Value Level'>Content</mat-tab>
 </mat-tab-group>

question from:https://stackoverflow.com/questions/66061911/there-is-way-to-set-different-underline-color-for-each-mat-tab

Answer 1

You can do so with adding class like this:

<mat-tab-group backgroundColor="green" mat-align-tabs="center" dynamicHeight headerPosition="below" (selectedTabChange)="onTabChanged($event)">
            <mat-tab label='IPV Model' class="blue">Content</mat-tab>
            <mat-tab label='IPV Market Data' class="orange">Content</mat-tab>
            <mat-tab label='Collateral' class="green">Content</mat-tab>
            <mat-tab label='Fair Value Level' class="yellow">Content</mat-tab>
 </mat-tab-group>

and then in your css:

.mat-tab-label.blue {
  border-bottom: 1px solid blue;
}

You can repeat this with your other tabs.