Unable to view Angular Material mat-tab ink bar sometimes in Angular 7?

Question

Very strange behaviour from mat-tab, seriously I m just gave up with this now, can't find any relevant solution regarding this.

         <mat-tab-group animationDuration="0ms" [selectedIndex]="activeIndex" (selectedTabChange)="onTabChange($event)" class="detail-page recent_tabs">
                <mat-tab label="Recent">
                  <div class="card_left detail-page">
                    <mat-tab-group #tabGroup [selectedIndex]="activeIndex2" (selectedTabChange)="onTabChange2($event)">
                      <mat-tab label="ALL">
                      </mat-tab>
                      <mat-tab label="T20">
                      </mat-tab>
                      <mat-tab label="ODI">
                      </mat-tab>
                      <mat-tab label="TEST">
                      </mat-tab>
                    </mat-tab-group>
                  </div>
                </mat-tab>
                <mat-tab label="Upcoming">
                  <div class="card_left detail-page">
                    <mat-tab-group #tabGroup [selectedIndex]="activeIndex2" (selectedTabChange)="onTabChange2($event)">
                      <mat-tab label="ALL">
                      </mat-tab>
                      <mat-tab label="T20">
                      </mat-tab>
                      <mat-tab label="ODI">
                      </mat-tab>
                      <mat-tab label="TEST">
                      </mat-tab>
                    </mat-tab-group>
                  </div>
                </mat-tab>
            </mat-tab-group>

Everything works well. In the Recent and Upcoming Tabs, when I navigate to recent tab, then I m showing by default all select and similarly when the user clicks on upcoming I show the "all" tab

When the tabs are changing, then mat-ink bar not shows and when I open the inspect element then it suddenly shows and now I navigate from recent to upcoming it works, then suddenly I changed to some other tabs t20, test or ODI, then after again I click on Recent Tab, it navigate to all and the selectedIndex2 is 0 but the mat-ink-bar is not showing and now I closed the inspect element tab suddenly it comes so it works when I toggle the inspect element and I don't know why this happened?

Don't know why this strange behaviour from angular-mat-tabs

Able to replicate the issue in stackblitz too, Angular Mat Tab inStackblitz link

Answer 1

angular material tab remove component from DOM if tab is invisible. Component is still alive but there no view in DOM.

if you try to change selected tab on invisible tab, then material tab get new active tab and try to update ink-bar. ink-bar need DOM element to get current left position but there is no DOM at this time.

Solution just update ink-bar on selectedTabChange

TS

export class TabsTemplateExample {

  activeIndex: number;
  activeIndex2: number;

  @ViewChildren('childTabs') childTabs: QueryList<MatTabGroup>;

  onTabChange(event: any){
    this.activeIndex = event.index;

    this.childTabs.forEach(childTab => {
       childTab.realignInkBar();
    });

  }

  onTabChange2(event: any){
    this.activeIndex2 = event.index;

  }

}

HTML

<mat-tab-group ... >

   <mat-tab-group #childTabs ... >
     ...
   </mat-tab-group>

   <mat-tab-group #childTabs ... >
    ...
   </mat-tab-group>

</mat-tab-group>

DEMO: stackblitz