Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

tabs: nested mat-tab-groups undesirably inherit @Inputs from parent

See original GitHub issue

Bug Report

Hey guys, I’m going crazy with this buggy feature of angular material. If you want to use a nested mat-tab-group inside of a mat-tab-group, which has background color of primary, all your child tab-groups gets the same background color. WHY the hell it happens???

Demo and steps to reproduce the issue

Take this example https://stackblitz.com/angular/oorxxxlyavb?file=src%2Fapp%2Ftab-group-basic-example.html or any other it doesn’t matter.

Add or replace the content with that

<mat-tab-group backgroundColor="primary">
  <mat-tab label="First">
    <mat-tab-group>
      <mat-tab label="First"> Content 1 </mat-tab>
      <mat-tab label="Second"> Content 2 </mat-tab>
      <mat-tab label="Third"> Content 3 </mat-tab>
    </mat-tab-group>
  </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

AND SEE

The nested tab group should provide the default behavior, without background and colorized underline, because there is no property “backgroundColor”, BUT IT DOESN’T. Instead it gets the same background color like it’s parent.

We need either a fix for that unexpected behavior or a possibility to explicit unset the backgroundColor property.