Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 707
Pablo Sanchez Avatar asked Dec 17 '22 19:12

Pablo Sanchez


2 Answers

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>
like image 73
Katja Avatar answered Dec 28 '22 09:12

Katja


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

like image 35
Pablo Sanchez Avatar answered Dec 28 '22 09:12

Pablo Sanchez