how to get active tab highlighted in mat-tab?

user_5178586 0
Viewed 6392

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

angular8 angular-material css html
2 Answers

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

user_83485580

as I answered in here the browser won't keep the temporary data after the refresh, it erases all the previously done stuff, to overcome this we can use local storage mechanism, Try this local storage code this may help you,

storing to local storage

handleMatTabChange(event: MatTabChangeEvent) {
  localStorage.setItem('curentab', event.index);
}

getting back on page load:

ngOnInit() {
  let index = localStorage.getItem('curentab');
  this.tabGroup.selectedIndex = index; 
}

hope this will give you some idea,

user_129166910
Related