Angular material tab group problem on nested tab group (no default tab displayed)

Question

I'm facing the following problem with mat-tab-group nested inside a mat-tab-group. The nested group in the first tab of the parent group is selecting a default tab and showing the underline in the first tab, but the group nested in the third tab of the parent group, it's not showing the underline in any tab.

I've attached the link of the demo with the problem: https://stackblitz.com/edit/angular-material-tabs-problem

Any help? Thanks in advance!

Answer 1

As this post suggests https://github.com/angular/components/issues/7274#issuecomment-605516292 wrap your child mat-tab-group with a <ng-template matTabContent> and it'll work (tested with Angular 8).

<mat-tab-group>
  <mat-tab label="Tab1">
    Test1
  </mat-tab>
  <mat-tab label="Tab2" >
    <ng-template matTabContent>
      <mat-tab-group>
        <mat-tab label="Tab2-1">
          Test2-1
        </mat-tab>
        <mat-tab label="Tab2-2">
          Test2-2
        </mat-tab>
      </mat-tab-group>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Answer 2

After reviewing the mat tab inside tab selected index not working question, the workaround provided there solved the problem.