Angular material mat tab group in hidden container does not show overflow buttons unless selected tab is clicked

Question

As mentioned in the link, in angular material tabs the ink bar does not show selection in header properly, which can be resolved with a workaround by using a view child as shown in the example at Stackblitz.

But if you are having overflow as shown in the example above the next and previous buttons only come on selecting the particular tab.

How can I handle the issue, taking the above example as reference.

Image 1: Active tab not clicked

Image 2: Active tab clicked

Answer 1

A workaround I found to make my ink bar update and pagination occur correctly was to add a method to manually update header on resize,open and close events of my hidden container

function updateTabHeader() {
 this.matTabGroupReference._tabHeader.updatePagination();
 this.matTabGroupReference.realignInkbar();
}

matTabGroupReference is a refernce to mat-tabs-group component