Angular Material tab: Scroll to selected tab when resized

Question

I use the Material Tab example. I select in all the three tabs the last tab. When I resize the width of the panel the selected tab scrolls out of view.

As seen in the picture the third is NOT visible. Is there a way to scroll the third automatically into the view? (e.g. with an action of a button)

Use case: I have a layout which changes the width of a component with an users click and than the selected tab is on the far left side - contrary to the sample here where it is on the right side. In my use case the user hardly knows that there is a tab pane - unless (s)he knows the meaning of the arrows.

==> So I want to scroll the tabs into view. How to do it?

Answer 1

I would say most users would understand the meaning of the arrows.

If you really want to do something about it:

Option 1

The first thing comes to mind is using the native scrollIntoView method on the tab you want to show.

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab>
    <ng-template mat-tab-label>
      <span id="header"> Third </span>
    </ng-template>
    Content 3
  </mat-tab>
</mat-tab-group>

Then in your component:

(document as any).getElementById('header').scrollIntoView({behavior: "smooth", inline: "end"});

Option 2

You can also trigger click on either left or right arrow until tab is visible.

// Click left arrow
document.querySelector('.mat-tab-header-pagination-before').click()

// Click right arrow
document.querySelector('.mat-tab-header-pagination-after').click()