bug(Tabs): Paginator items are not shown if layout of view changes

[MeMeMax]

Reproduction

Steps to reproduce:

1. Go to this stackblitz https://stackblitz.com/edit/angular-ptyfdp?file=src/app/tab-group-dynamic-example.html
2. Add or delete tabs so that you have the maximum of tabs shown without having a paginator
3. Click on "expand" button so that the layout of the view changes

Expected Behavior

I would expect that if the layout of the view changes and the tabs do not have enough space anymore the paginator elements are shown automatically. If the tabs have enough space the paginator elements should disappear.

Actual Behavior

Paginator elements are only added when I resize the window. Not when the layout changes.

Environment

• Angular: 12.1.2
• CDK/Material: 12.1.2
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

The reason this happens is that the calculations to check if the paginator should be shown can be expensive, because they can trigger a page layout. In order to limit their impact, we only recalculate the pagination when a tab is added/removed, when the content of the tab header itself changes (based on MutationObserver) or when the page is resized. In order to handle your case, we'd have to either use a ResizeObserver which isn't supported in all browsers, or we'd have to poll the DOM for size changes which will destroy the app's performance.

We may be able to do this automatically once support for IE11 is dropped, but until then we also expose an API that you can use to tell the tabs to recalculate their pagination.

[MeMeMax]

@crisbeto thanks for your response. So are you already providing a API to recalculate? That would be perfectly fine as I have the information when to update anyway. Or are you planning to implement such?

[crisbeto]

Hmm, I was under the impression that we did, but it seems like we only have one for re-aligning the ink bar. I'll reopen this issue as a feature request. Technically you can access it already if you're comfortable with accessing private APIs. It's at MatTabGroup._tabHeader.updatePagination.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}