Angular Material tab: Scroll to selected tab when resized - angular-material

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()