Angular material tag group has no inkbar when the tab group is in an other tab group

Question

I have multiple tabs on my website and the main tab group does not have any issues at all. However, when I place an other tab group within on the tabs, the ink bar is only displayed when one of the tabs is clicked.

Here are is a picture of my problem :

When I click on a tab, event if it is already being display, the ink bar will do a transition animation from outside of the screen and place itself correctly where is is supposed to be :

( here I clicked on the sub - sub tab group and the sub tab group - Jeu vidéo - does not react )

The tabs are completely functional ( they react normally when clicking on them ) but I cannot get the ink tab to be display without a click.

What can I do to get the tabs to have their ink tab displayed correctly without having a user input ?

The code is as follow ( there is no javascript currently but I can add some ) :

<mat-tab-group mat-align-tabs="center">
  <mat-tab label="Presentation">
    <app-presentation>
    </app-presentation>
  </mat-tab>
  <mat-tab label="Experience">
    <app-experience>
    </app-experience>
  </mat-tab>
  <mat-tab label="Education">
    <app-education>
    </app-education>
  </mat-tab>
  <mat-tab label="Projets">
    <div class="buffer"></div>
    <div class="buffer"></div>
    <div class="container">
      <div class="row">
        <div class="col-sm-2"></div>
        <div class="col-sm-8">
          <p>text here</p>
          <div class="spacer"></div>
          <div class="separator"></div>
        </div>
        <div class="col-sm-2"></div>
      </div>
    </div>
    <mat-tab-group mat-align-tabs="center">
      <!-- jeux vidéos -->
      <mat-tab label="Jeu vidéo">
        <mat-tab-group mat-align-tabs="center">
          <mat-tab label="Tower Defense mobile">
            <app-project-tower-defense></app-project-tower-defense>
          </mat-tab>
          <mat-tab label="Voronoï Procedural terrain generation">
            <app-project-voronoi></app-project-voronoi>
          </mat-tab>
          <mat-tab label="Supremacy">
            <app-project-supremacy></app-project-supremacy>
          </mat-tab>
        </mat-tab-group>
      </mat-tab>
      <!-- imprimantes 3D -->
      <mat-tab label="DIY">
        <mat-tab-group mat-align-tabs="center">
          <mat-tab label="Auto Cat Feeder">
            <app-project-cat-feeder></app-project-cat-feeder>
          </mat-tab>
          <mat-tab label="Retro gameboy">
            <app-project-retro-gameboy></app-project-retro-gameboy>
          </mat-tab>
          <mat-tab label="Mega LED">
            <app-project-mega-led></app-project-mega-led>
          </mat-tab>
        </mat-tab-group>
      </mat-tab>
      <!-- web scrapping -->
      <mat-tab label="Web Scrapping">
        <mat-tab-group mat-align-tabs="center">
          <mat-tab label="MangaScrap">
            <app-project-mangascrap></app-project-mangascrap>
          </mat-tab>
          <mat-tab label="MangaScrap2">
            <app-project-mangascrap2></app-project-mangascrap2>
          </mat-tab>
        </mat-tab-group>
      </mat-tab>
      <!-- misc -->
      <mat-tab label="Photoshop">
        <mat-tab-group mat-align-tabs="center">
          <mat-tab label="Pub bière">
            <app-project-beer-add></app-project-beer-add>
          </mat-tab>
        </mat-tab-group>
      </mat-tab>
    </mat-tab-group>
  </mat-tab>
</mat-tab-group>

Note : adding a [selectedIndex]="0" does not change anything

Edit : I noticed that resizing the screen while the sub mat tab groups are visible also works

Answer 1

Inkbar of nested mat-tab-groups with dynamicHeights work with this workaround using *ngFor :

<mat-tab-group [dynamicHeight]="true">
    <mat-tab #tab>
            <mat-tab-group *ngFor="let workaround of [tab.isActive]" [dynamicHeight]="true">
            ...

*ngFor causes the inner element to re-render when active.

Answer 2

You need to encapsulate the mat tab groups with an

<ng-template matTabContent>...your tab groups...</ ng-template>

See below:

<h3>Nested Tab Groups</h3>
    
      <mat-tab-group mat-align-tabs="center">
        <mat-tab label="Presentation"></mat-tab>
        <mat-tab label="Experience"></mat-tab>
        <mat-tab label="Education"></mat-tab>
        <mat-tab label="Projets">
          <div class="buffer"></div>
          <div class="buffer"></div>
          <div class="container">
            <div class="row">
              <div class="col-sm-2"></div>
              <div class="col-sm-8">
                <p>text here</p>
                <div class="spacer"></div>
                <div class="separator"></div>
              </div>
              <div class="col-sm-2"></div>
            </div>
          </div>
          <ng-template matTabContent> <!-- Note the ng-template -->
            <mat-tab-group mat-align-tabs="center">
              <!-- jeux vidéos -->
              
              <mat-tab label="Jeu vidéo">
                <ng-template matTabContent>
                  <mat-tab-group mat-align-tabs="center" >
                    <mat-tab label="Tower Defense mobile"></mat-tab>
                    <mat-tab label="Voronoï Procedural terrain generation"></mat-tab>
                    <mat-tab label="Supremacy"></mat-tab>
                  </mat-tab-group>          
                </ng-template>
              </mat-tab>
              <!-- imprimantes 3D -->
              <mat-tab label="DIY">
                <ng-template matTabContent>
                  <mat-tab-group mat-align-tabs="center">
                    <mat-tab label="Auto Cat Feeder"></mat-tab>
                    <mat-tab label="Retro gameboy"></mat-tab>
                    <mat-tab label="Mega LED"></mat-tab>
                  </mat-tab-group>          
                </ng-template>
              </mat-tab>
              <!-- web scrapping -->
              <mat-tab label="Web Scrapping">
                <ng-template matTabContent> 
                  <mat-tab-group mat-align-tabs="center">
                    <mat-tab label="MangaScrap"></mat-tab>
                    <mat-tab label="MangaScrap2"></mat-tab>
                  </mat-tab-group>
                </ng-template>
              </mat-tab>
              <!-- misc -->
              <mat-tab label="Photoshop">
                <ng-template matTabContent>
                  <mat-tab-group mat-align-tabs="center">
                    <mat-tab label="Pub bière"></mat-tab>
                  </mat-tab-group>
                </ng-template>
              </mat-tab>
            </mat-tab-group>
          </ng-template>
        </mat-tab>
      </mat-tab-group>