mat tab inside tab selected index not working

Question

When tab inside tab then if selected index of sub tab is 1 then it should show as selected.

Let parent tab has two tabs, it has selectedIndex is 0, and sub tab inside parent tab1 has selectedIndex = 1 then content inside it showing but is not showing as selected. Tab content is showing but tab is not selected

Here is the working example

Answer 1

There is currently an open issue for this. As a workaround you can use 2 way binding on your parent tab selectedIndex and then only show the subtab group when the parent tab is selected:

<mat-tab-group [(selectedIndex)]="index">
  <mat-tab label="Tab 1">Parent tab 1 Content</mat-tab>
  <mat-tab label="Tab 2">
    <mat-tab-group *ngIf="index == 1" [selectedIndex]="1">
      <mat-tab label="Tab 1">sub tab 1 Content </mat-tab>
      <mat-tab label="Tab 2">sub tab 2 Content
      </mat-tab>
    </mat-tab-group>
  </mat-tab>
</mat-tab-group>

Demo

Answer 2

A workaround that worked for me was by setting on my .ts

parentTabSelected = false;     

handleMatTabChange(event: MatTabChangeEvent) {
        const index= localStorage.getItem('parentTab');
        if (event.index === Number(index)) {
            this.parentTabSelected = true;
        }
    }

then on my html file I called the function on the <mat-tab-group> element (selectedTabChange)="handleMatTabChange($event)" and by using on the <mat-tab *ngIf="parentTabSelected"> it works.

Answer 3

Set selectedIndex before the existence of the MatTabGroup and the contents of the selected tab will be displayed, also in this the contents will be visible correctly when selectedIndexChange and selectedTabChange fire.