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

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.


Angular versions

  • Angular: 11.0.0
  • Angular Material: 11.0.3

1 possible answer(s) on “tabs: nested mat-tab-groups undesirably inherit @Inputs from parent

  1. Please submit Angular Material and CDK questions here and issues here. This repo is for AngularJS Material.

    I have transferred this issue to the correct repository for you.