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

0
votes

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

3
angulartypescriptangular-materialmat-tab
Wasn't really able to replicate the issue that you're talking about. Do you mind forking this stackblitz replicating your issue in there and sharing across a version that replicates your issue - SiddAjmera
Check the post I have added the stackblitz link, same here when you open the inspect element then mat-ink bar shows - VIKAS KOHLI
here also it replicates navigate to some tabs and then mat-ink bar will not show then open inspect element or press f12 key the ink bar will show - VIKAS KOHLI

3 Answers

2
votes

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

1
votes

As Miladfm stated, the inner tabs are not shown on the screen until the parent tab is clicked so it cannot set the inner tab ink bar correctly initially. I resolved by using <ng-template matTabContent> for lazy loading of the tab which contains the inner tabs. It loads those inner tabs only after the parent tab is navigated to, so it sets the ink bar correctly.

Before

<mat-tab-group>
    <mat-tab label="Item Usage">
       <mat-tab-group>
          ...
       </mat-tab-group>
    </mat-tab>
</mat-tab-group>

After

<mat-tab-group>
    <mat-tab label="Item Usage">
       <ng-template matTabContent>
          <mat-tab-group>
             ...
          </mat-tab-group>
       </ng-template>
    </mat-tab>
</mat-tab-group>
0
votes

As a late update, based on the solution of you guys ->

I had a non-nested mat-tab-group that was giving me some problems (ink bar not appearing, only on zoom), what solved it for me was this, maybe it helps someone out there:

my.component.ts

@ViewChild("tabgroup", { static: true }) tabGroup: MatTabGroup;

ngAfterViewChecked(): void {
  this.tabGroup.realignInkBar();
}

my.component.html

<mat-tab-group #sidecartabgroup>
  <mat-tab>
    <ng-template mat-tab-label>
      <i class="material-icons icon">bookmarks</i>
      <span class="d-none d-sm-inline">Tab 1</span>
    </ng-template>

    <custom-component-one></custom-component-one>
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <i class="material-icons icon">bookmarks</i>
      <span class="d-none d-sm-inline">Tab 2</span>
    </ng-template>

    <custom-component-two></custom-component-two>
  </mat-tab>
</mat-tab-group>