Angular Material tab header: pagination controls flickering

Question

I haven't seen this in material@15, but have run into it half a dozen times with material@16

At some particular widths of the tab group, the tab header will jump between two states:

• display the tab headers with pagination control (ie < on far left and > on far right)
• display the tab headers without pagination controls

I cannot make a sample code to show this, but it has already appeared on three of my pages. When it happens, the page width is wide enough to show all the tab headers without scrolling. Yet, the <> appears (making the headers to be displayed with less spacing) and then disappears. It is happening at more times per second than my eye can catch. All I can see is a pair of blur images for each tab header, since they are placed at slightly different locations with vs without the <>. On inspection, the class mat-mdc-tab-header-pagination-controls-enabled will be applied and removed from the mat-tab-header at top speed.

I have no idea how to reproduce it, it happens when the material tab group has a particular range of width.

Even given a page with a material tab group, it is not always possible to resize the page to make this happen.

Answer 1

In my case the issue is caused by how angular material handles pagination for mat-tab-nav-bar

Once you set the disablePagination="true" on the mat-tab-nav-bar, the flicker issue got solved.

eg:

<nav mat-tab-nav-bar [tabPanel]="tabPanel" disablePagination="true" >
    <a mat-tab-link
    value="warn"
    [routerLink]="item.route" 
    *ngFor="let item of navLinks; let i = index" 
    #rla{{i}}="routerLinkActive"
    (click)="activeLink = item.label"
    [active]="activeLink == item.label"
            routerLinkActive>
            {{item.label}}
    </a>
  </nav>
  <mat-tab-nav-panel #tabPanel>
    <router-outlet></router-outlet>
  </mat-tab-nav-panel>

ref: Official Documentation

Answer 2

I came across the same situation.

What worked for me in this case was applying a style to "<mat-tab-group..."

.mat-mdc-tab-group {
   ...
   max-width: 99.99%;
}

This way, overwriting the original value, which is 100%. I don't think it's a definitive solution, but it worked for me.