Angular material active tab label color changes when clicking away

Question

I overrode the mat-tab-label-active to change the color of the active tab to a custom color (yellow) but when I click anywhere in the page the color changes and becomes dirty like there is another layer of faded color on top of it (see this screenshot) . How do I keep the color of the active tab just like when it's clicked all the time/until changing tab ?

my code :

::ng-deep.mat-tab-label.mat-tab-label-active {
  background-color: #FCE500;
  font-weight: 700;
  color: black;
}

Answer 1

The opacity and background color is changed dynamically based on focus. You need to control that. Something like

::ng-deep.mat-tab-label.mat-tab-label-active:not(.mat-tab-disabled),
::ng-deep.mat-tab-label.mat-tab-label-active.cdk-keyboard-focused:not(.mat-tab-disabled) {
  background-color: #FCE500;
  font-weight: 700;
  color: black;
  opacity: 1;
}

I don't recommend changing the opacity because if you make it always '1' it looks like the tab has focus when it does not - you can't tell the difference - not a good user experience.

Answer 2

It has already been answered, but I encountered the same problem but fixed it with another solution since the other answers didn't really fit with my preferences. This is what I did:

(Here's a working stackblitz: https://stackblitz.com/edit/angular-tabs-focussed)

I declared my tabs for the navigation. And declared a SelectionModel.

  public tabs = [
    {value: 'Stepper', link: './stepper'},
    {value: 'Quotations', link: './quotations'},
    {value: 'Designs', link: './designs'},
    {value: 'Elements', link: './elements'},
    ];
  private selection = new SelectionModel();

In my HTML it looks like this:

<nav mat-tab-nav-bar class="tabs-group">
  <a *ngFor="let tab of tabs" (click)="select(tab)" mat-tab-link [routerLink]="tab.link" 
     class="header-btn" [ngClass]="{focus: isSelected(tab)}">
    <a>{{tab.value}}</a>
  </a>
</nav>
<router-outlet class="router-outlet-small"></router-outlet>

I got two methods which will do the selection. I also want to select the first tab as default. The select() method will select the tab, the isSelected() method will take care of the CSS within the [ngClass] statement in the tab HTML.

  ngOnInit() {
    this.selection.select(this.tabs[0]); // Will select the first tab.
  }

  select(tab) {
    if (!this.selection.isSelected(tab)) {
      this.selection.clear(); // Only one tab can be selected in this way
      this.selection.select(tab);
    }
  }

  isSelected(tab): boolean {
    return this.selection.isSelected(tab);
  }

The isSelected() method will return true/false which will trigger the styling class to header-btn.focus which is shown below in my css.

.header-btn {
 // My css
}

.header-btn.focus {
  opacity: 1;
}