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 :

Answer 1

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

check out this demo.