4

I've noticed that the MatTabNavBar is behaving different from a regular MatTabGroup when it comes to showing the arrows if the container gets too small for the tabs.

I used the official documentation to build the MatTabNavBar and MatTabGroup, but you can see here that the MatTabGroup is showing arrows and the MatTabNavBar is not.

https://angular-gaio5u.stackblitz.io

Template used for MatTabGroup:

<mat-tab-group>
  <mat-tab
    *ngFor="let tab of tabs"
    [label]="tab.label"
  >
    {{ tab.label }}
  </mat-tab>
</mat-tab-group>

Template used for MatTabNavBar:

<nav mat-tab-nav-bar>
  <a
    mat-tab-link
    *ngFor="let tab of tabs"
    [active]="isActive(tab)"
    (click)="setActive(tab)"
  >
    {{ tab.label }}
  </a>
</nav>

...so am I missing anything?! The expected result is the MatTabNavBar showing the same arrows as MatTabGroup.

mr.alex
  • 503
  • 1
  • 8
  • 16
  • 2
    There's already an Open Issue related to this - [#2177](https://github.com/angular/material2/issues/2177) The actual issue was reported here - [#8795](https://github.com/angular/material2/issues/8795), which was marked as a Duplicate of [#2177](https://github.com/angular/material2/issues/2177) – SiddAjmera Nov 09 '18 at 07:56
  • Thanks a lot @SiddAjmera! Maybe I should have checked that first, but thought this is probably my fault :) – mr.alex Nov 09 '18 at 08:31

2 Answers2

1

FYI, this seems to be fixed in versions @angular/material@8.2.x and newer.

Ben Winding
  • 10,208
  • 4
  • 80
  • 67
1
        <mat-tab-group class="mat-tab-header mat-tab-header-pagination-controls-enabled" mat-align-tabs="center" #tabs (selectedTabChange)="onTabPanelClick($event, $event.tab)">

Note Ad this -> class="mat-tab-header mat-tab-header-pagination-controls-enabled"

vaibhav thakur
  • 11
  • 1