bug(mat-tab-group): mat-tab-header-pagination buttons are not reacting to viewport resize

[Romjkez]

Overview

In Angular Material v9.2.4 (and earlier) we had the following behavior: if you resize the viewport, mat-tab-group will automatically show/hide mat-tab-header-pagination buttons (buttons used for scrolling mat-tab-group horizontally) depending on how much space is available for tabs.
Starting from v10 this behavior changed.

Reproduction

Use StackBlitz to reproduce your issue:

• v9.2.4 (how it was before): https://stackblitz.com/angular/xbpevvrbkpr
• v10.2.7 (now): https://stackblitz.com/angular/xoepvnaxqak
• v11.2.6 (now): https://stackblitz.com/angular/arkybxaymml

Steps to reproduce:

1. Reduce width of viewport (resize) to make only some of the tabs visible
2. Click on any (not disabled) tab
3. Increase width of viewport (resize) to make all of the tabs visible
4. Click on any (not disabled) tab or pagination button

Expected Behavior

mat-tab-header-pagination buttons should immediately appear/disappear as soon as mat-tab-group shrank/expanded
OR (for change detection optimizations)
mat-tab-header-pagination buttons should appear after user finished resizing, but with some delay (50-200ms for example)

Actual Behavior

mat-tab-header-pagination buttons visibility change only after manual triggering of change detection (programmatically or by user action - click)

Environment

• Angular: 11.2.8
• CDK/Material: 11.2.6
• Browser(s): Version: Chrome 89.0.4389.114 (Official Build) (64-bit)
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[Romjkez]

I think it could be also related to #22384

[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.}