CODEWITHSUNDEEP
angularangular-material2
Saurabh Agrawal
Saurabh Agrawal

Reputation: 7739

mat tab inside tab selected index not working

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

enter image description here

Here is the working example

Upvotes: 8

Views: 10046

Answers (5)

Jonathan Nieto
Jonathan Nieto

Reputation: 21

I think you need to wrap second mat-tab-group with :

<mat-tab-group [selectedIndex]="0">
  <mat-tab label="Tab 1">Parent tab 1 Content</mat-tab>
  <mat-tab label="Tab 2">
    <ng-template matTabContent>
      <mat-tab-group [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>
    <ng-template matTabContent>
  </mat-tab>
</mat-tab-group>

Upvotes: 0

The Mauler
The Mauler

Reputation: 148

For some reason, the selectedIndex input doesn't always match the internal tabIndex in your component. That leads to a misaligned ink bar or the wrong tab content being shown.

Solution would be to set this.matTabGroup.selectedIndex = this.tabIndex;

tabIndex: number; // bound to [selectedIndex] of mat-tab-group
@ViewChild(MatTabGroup, { static: false }) private matTabGroup: MatTabGroup;

setGroupIndex(): void { // call this function whenever you change your tabIndex
    if (this.tabIndex !== this.matTabGroup.selectedIndex) {
        this.matTabGroup.selectedIndex = this.tabIndex; 
    }
}

Upvotes: 0

xPiki
xPiki

Reputation: 1

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.

Upvotes: 0

Александр Калугин
Александр Калугин

Reputation: 36

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.

Upvotes: 0

Michael Doye
Michael Doye

Reputation: 8171

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

Upvotes: 18

Related Questions