From fc69d71a0dc7f4c695fda4f78fd4e534ac347412 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Sun, 1 Aug 2021 13:21:00 +0200 Subject: [PATCH] feat(material/tabs): add API to update the pagination We try to update the pagination state of the tab group very sparingly, because it has performance implications. This means that we may miss some updates. These changes expose a method so that consumers can trigger a recalculation on their own. Fixes #23206. --- src/material/tabs/tab-group.ts | 16 +++++++++++++++- tools/public_api_guard/material/tabs.md | 1 + 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts index c115e03fb612..ac15a36f74c8 100644 --- a/src/material/tabs/tab-group.ts +++ b/src/material/tabs/tab-group.ts @@ -67,7 +67,8 @@ const _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(class { }), 'primary'); interface MatTabGroupBaseHeader { - _alignInkBarToSelectedTab: () => void; + _alignInkBarToSelectedTab(): void; + updatePagination(): void; focusIndex: number; } @@ -306,6 +307,19 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements } } + /** + * Recalculates the tab group's pagination dimensions. + * + * WARNING: Calling this method can be very costly in terms of performance. It should be called + * as infrequently as possible from outside of the Tabs component as it causes a reflow of the + * page. + */ + updatePagination() { + if (this._tabHeader) { + this._tabHeader.updatePagination(); + } + } + /** * Sets focus to a particular tab. * @param index Index of the tab to be focused. diff --git a/tools/public_api_guard/material/tabs.md b/tools/public_api_guard/material/tabs.md index 3307cec79123..52100bf1e134 100644 --- a/tools/public_api_guard/material/tabs.md +++ b/tools/public_api_guard/material/tabs.md @@ -269,6 +269,7 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements // (undocumented) abstract _tabHeader: MatTabGroupBaseHeader; _tabs: QueryList; + updatePagination(): void; // (undocumented) static ɵdir: i0.ɵɵDirectiveDeclaration<_MatTabGroupBase, never, never, { "dynamicHeight": "dynamicHeight"; "selectedIndex": "selectedIndex"; "headerPosition": "headerPosition"; "animationDuration": "animationDuration"; "contentTabIndex": "contentTabIndex"; "disablePagination": "disablePagination"; "backgroundColor": "backgroundColor"; }, { "selectedIndexChange": "selectedIndexChange"; "focusChange": "focusChange"; "animationDone": "animationDone"; "selectedTabChange": "selectedTabChange"; }, never>; // (undocumented)