fix(material/tabs): ensure the ink bar realigns when the tab header items have changed in dimensions

Author: hilts-vaughan

src/material/tabs/paginated-tab-header.ts

@@ -32,7 +32,7 @@ import {ViewportRuler} from '@angular/cdk/scrolling';
 import {FocusKeyManager, FocusableOption} from '@angular/cdk/a11y';
 import {ENTER, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
 import {merge, of as observableOf, Subject, timer, fromEvent} from 'rxjs';
-import {take, takeUntil} from 'rxjs/operators';
+import {take, map, startWith, takeUntil} from 'rxjs/operators';
 import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 
@@ -218,7 +218,7 @@ export abstract class MatPaginatedTabHeader
 
     // On dir change or window resize, realign the ink bar and update the orientation of
     // the key manager if the direction has changed.
-    merge(dirChange, resize, this._items.changes)
+    merge(dirChange, resize, this._getItemChanges())
       .pipe(takeUntil(this._destroyed))
       .subscribe(() => {
         // We need to defer this to give the browser some time to recalculate
@@ -246,6 +246,35 @@ export abstract class MatPaginatedTabHeader
     });
   }
 
+  /** A method responsible for sending any change that could affect layout about
+   * items to subscribers.
+   */
+  _getItemChanges() {
+    const itemContainerItemChanged = new Subject<void>();
+
+    // Check to see if ResizeObserver is supported and if not, stub the function
+    // out so that it does nothing if not supported
+    const observer =
+      typeof ResizeObserver === 'function'
+        ? new ResizeObserver(() => {
+            itemContainerItemChanged.next();
+          })
+        : {
+            observe: () => {},
+          };
+
+    return merge(this._items.changes, itemContainerItemChanged).pipe(
+      startWith(this._items),
+      map(() => {
+        for (const item of this._items.toArray()) {
+          this._ngZone.runOutsideAngular(() => {
+            observer.observe(item.elementRef.nativeElement);
+          });
+        }
+      }),
+    );
+  }
+
   ngAfterContentChecked(): void {
     // If the number of tab labels have changed, check if scrolling should be enabled
     if (this._tabLabelCount != this._items.length) {

src/material/tabs/tab-header.spec.ts

@@ -636,6 +636,23 @@ describe('MatTabHeader', () => {
       discardPeriodicTasks();
     }));
 
+    it('should re-align the ink bar when the size of a tab changes', fakeAsync(() => {
+      fixture = TestBed.createComponent(SimpleTabHeaderApp);
+      fixture.detectChanges();
+
+      const inkBar = fixture.componentInstance.tabHeader._inkBar;
+
+      spyOn(inkBar, 'alignToElement');
+
+      // Change font-size which would trigger a container width change
+      (fixture.elementRef.nativeElement as HTMLElement).style.fontSize = '20px';
+      tick(150);
+      fixture.detectChanges();
+
+      expect(inkBar.alignToElement).toHaveBeenCalled();
+      discardPeriodicTasks();
+    }));
+
     it('should update arrows when the window is resized', fakeAsync(() => {
       fixture = TestBed.createComponent(SimpleTabHeaderApp);