tab component: pagination controls are not responsive to container width changes

[colinvella]

Bug, feature request, or proposal:

The tab component should either respond to changes in the width of its container and enable/disable pagination accordingly, or alternatively, expose a method to recompute pagination state. A possible solution might be to implement a public method such as the following:

updatePagination() {
    this._tabHeader._checkPaginationEnabled();
    this.changeDetector.detectChanges();
}

What is the expected behavior?

The component is expected to respond to width changes driven not only by browser resizing but also when the containing element changes width.

Alternatively, a method is provided to explicitly update pagination controls. Such a method would typically be called from a ResizeObserver hook or equivalent.

What is the current behavior?

When the containing element changes width, pagination controls are not updated.

What are the steps to reproduce?

Place a tab group in a container that has a dynamic width, such as an expandable side panel. Add tabs that fit the panel when fully expanded but are partially hidden. When the panel is partially collapsed such that not all tabs are visible, no pagination controls are shown.

What is the use-case or motivation for changing an existing behavior?

To allow the tab control to be used in a dynamically sized container.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6, Material 2, Applicable OS, Typescript 2.x.x, Chrome/Safari/Firefox/Edge

Is there anything else we should know?

[colinvella]

I'm not sure #13935 covers responsiveness per se. It is useful to have a public updatePagination method of course. However, this would only be part of the solution as it needs to be invoked in a resize observer or equivalent size tracking API. Ideally the tab group component would update pagination dynamically when its container changes width.

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

[andrewseguin]

Re-opening - it's not clear how this API can be used since the tab header is part of the tab group and not accessible outside of the group (e.g. cannot see it with a ViewChild). It would be nice also to have an optional check on container width, as mentioned by @colinvella

[crisbeto]

I suspect this was resolved by #28783.