how to get active tab highlighted in mat-tab?

I am using angular material for angular development.

HTML Component

<mat-tab-group headerPosition="above" [selectedIndex]="1">
    <mat-tab label="Home" routerLinkActive="active-link"> <app-homer></app-home></mat-tab>
    <mat-tab label="Orders" routerLinkActive="active-link"> <app-order></app-order> </mat-tab>
    <mat-tab label="Contact Us" routerLinkActive="active-link"> <app-contact></app-contact> </mat-tab>
    <mat-tab label="Profile" routerLinkActive="active-link"> <app-profile></app-profile></mat-tab>
  </mat-tab-group>

CSS

.mat-tab-label{
    margin-top: 20px;
    border: 2px solid black; 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 10vw;
    height: 4vh !important;
    background-color: black;
    font-size: 12px;
    font-weight: bold;
    opacity: 1;
    color: yellow;
}

I have customized default tab which comes in white color by giving specific color and border as shown in the css. When I load the page I am getting selected component but the tab is not active and looks like disabled. But If I click I can see the difference , the given highlighted color shows when I click it. Is there any way to make the tab look active on load.

in mat-tab-link routerLinkActive="active-link" was there but no such feature in mat-tab ?

I decided to go with mat-tag-group and mat-tab because of the animated screen loading feature.

stackblitz link

Solution

Okay one of the easiest solution is to set ViewEncapsulation to None.

component file:

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

your component css file:


.mat-tab-label{
    margin-top: 20px;
    border: 2px solid black; 
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    width: 10vw;
    height: 4vh !important;
    background-color: black;
    font-size: 12px;
    font-weight: bold;
    opacity: 1;
    color: yellow;
}

/* Styles for the active tab label */

// change any styles you want for active tab
.mat-tab-label.mat-tab-label-active {
    background-color: white;
}

your html file:

<mat-tab-group headerPosition="above"> // if you want specific tab then use [selectedIndex]="INDEX_OF_TAB"
    <mat-tab label="Home"></mat-tab>
    <mat-tab label="Orders"></mat-tab>
    <mat-tab label="Contact Us"></mat-tab>
    <mat-tab label="Profile"></mat-tab>
</mat-tab-group>

ref: check also ViewEncapsulation