CODEWITHSUNDEEP
angularnestedangular-material
Pablo Sanchez
Pablo Sanchez

Reputation: 133

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

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!

Upvotes: 4

Views: 4376

Answers (2)

Katja
Katja

Reputation: 867

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>

Upvotes: 15

Pablo Sanchez
Pablo Sanchez

Reputation: 133

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

Upvotes: 2

Related Questions