MatTabGroup is not reliably showing pagination buttons

Question

I am having an issue with the Angular Material Tabs component. I am trying to use the MatTabGroup with a handful of tabs in it. The problem is, when my component gets created, the Pagination buttons are not shown even though the existing tabs use up more then the available space.

See the following screenshot:

Now, in most cases if I once increase and decrease the browser zoom level, the buttons suddenly show, see here:

The content of that tab group is created as follow:

<mat-tab-group>
  <mat-tab *ngFor="let thing of things"
           label="{{'thing.name'}}">
    <ng-template matTabContent>
      <custom-component [thing]="thing"></custom-component>
    </ng-template>
  </mat-tab>
</mat-tab-group>

What I noticed is, that there are always two containers with class .mat-tab-header-pagination in the dom, one for each of the pagination buttons. Both have display: none. Somehow the mechanism that sets the display: flex property does not kick in reliably.

Can someone tell me what the issue could be? Can I maybe trigger the reevaluation of whether or not the buttons should be shown manually?

Thanks for your help!

Answer 1

@ViewChild("panelTabs", {
  static: false
}) panelTabs: MatTabGroup;

constructor() {
  this.setIntervalX(() => (this.panelTabs ? ._tabHeader as MatPaginatedTabHeader).updatePagination(), 1000, 10)
}
setIntervalX(callback, delay, repetitions) {
  var x = 0;
  var intervalID = setInterval(() => {
    callback();
    if (++x === repetitions)
      window.clearInterval(intervalID);
  }, delay);
}