selectedIndex not working with multiple mat-tab-group

Question

I have multiple mat-tab-group into a single HTML page like :

    <mat-card class="card-app-content">
        <mat-tab-group [(selectedIndex)]="selectedIndex">
            ...
        </mat-tab-group
    </mat-card>

    <mat-card class="card-app-content">
        <mat-tab-group [(selectedIndex)]="selectedIndexMedia">
            ...
        </mat-tab-group
    </mat-card>

    <mat-card class="card-app-content">
        <mat-tab-group [(selectedIndex)]="selectedIndexHistory">
             ...
        </mat-tab-group
    </mat-card>

My .ts contains :

    selectedIndex           : number = 0;
    selectedIndexMedia      : number = 0;
    selectedIndexHistory    : number = 0;

In the first mat-tab-group, the index 0 is well selected (the first mat-tab is underline) but for the two others, no mat-tab are underline, likes no one of are selected :/

Here is a stackblitz reproducing the problem : https://stackblitz.com/edit/angular-oykb2e?file=app/tab-group-dynamic-example.html

For example, Working :

Not working :

Could you please provide a [mcve] of the problem you're facing? The code you've provided is not substantial enough to reproduce your problem. — Edric, Oct 12 '20 at 16:44

score 0 · Answer 1 · edited Apr 11 '21 at 12:58

0

I Resolved it by checking *ngIf="selectedIndex==1" on the second tab.

check out this demo.

edited Apr 11 '21 at 12:58

Tomerikoo

18,379
16
47
61

answered Apr 11 '21 at 12:53

Rok Ivartnik

137
5
17

selectedIndex not working with multiple mat-tab-group

1 Answers1