feat(material/tabs): add API to update the pagination (#23288)

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.

Author: crisbeto

src/material/tabs/tab-group.ts

@@ -71,7 +71,8 @@ const _MatTabGroupMixinBase = mixinColor(
 );
 
 interface MatTabGroupBaseHeader {
-  _alignInkBarToSelectedTab: () => void;
+  _alignInkBarToSelectedTab(): void;
+  updatePagination(): void;
   focusIndex: number;
 }
 
@@ -327,6 +328,19 @@ export abstract class _MatTabGroupBase
     }
   }
 
+  /**
+   * 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.

tools/public_api_guard/material/tabs.md

@@ -260,6 +260,7 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
     // (undocumented)
     abstract _tabHeader: MatTabGroupBaseHeader;
     _tabs: QueryList<MatTab>;
+    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)