[Tabs] Label has focused style after clicking

The first time that I load the tabs by default is set the first tab correctly however the opacity of the first tab is not set to 1. After that I click on it the opacity change in the correct way. Is that an Issue or I’m missing something?

After I click

<md-tab-group> <md-tab> <ng-template md-tab-label> All Orders <div class="bubble" #allOrdersBubble >{{allOrdersCount}}</div> </ng-template> <iag-all-orders (onPickup)="refreshItems()"></iag-all-orders> </md-tab> <md-tab> <ng-template md-tab-label style="opacity: 1"> My Orders <div class="bubble" #myOrdersBubble>{{myOrdersCount}}</div> </ng-template> <iag-my-orders (onRefresh)="refreshItems($event)"></iag-my-orders> </md-tab> </md-tab-group>

[ruchit07]

I was facing the same problem. @daniele-zurico You are correct. Selected tab is not showing background color and opacity 1. But when we clicked on that tab, it’s showing.

But you can apply whatever design you want to apply on selected tab on class “mat-tab-label-active”.

.mat-tab-label-active{ background-color: #3398dc !important; opacity: 1 !important; }

This might help!

[daniele-zurico]

But it’s inconsistent! If the first tab is selected by default it should have the same look and feel of clicked