fix(tabs): unnecessarily adding pagination when changing to new list of tabs with same labels

These changes fix an issue where swapping out the list of tabs to one with the same labels causes the header to add a pagination when it doesn't have to. It looks like issue comes down to the fact that we check the element dimensions before they've had the chance to update. This works for the case where the tabs have different text, because we also have a `MutationObserver` that looks at them and it fires a bit later.

Fixes #16789.

Author: crisbeto

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

@@ -24,7 +24,7 @@ import {ViewportRuler} from '@angular/cdk/scrolling';
 import {FocusKeyManager, FocusableOption} from '@angular/cdk/a11y';
 import {END, ENTER, HOME, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
 import {merge, of as observableOf, Subject, timer, fromEvent} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import {takeUntil, delay} from 'rxjs/operators';
 import {MatInkBar} from './ink-bar';
 import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
 
@@ -192,7 +192,8 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
     // 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).pipe(takeUntil(this._destroyed)).subscribe(() => {
-      realign();
+      // We need to defer this to give the browser some time to recalculate the element dimensions.
+      Promise.resolve().then(realign);
       this._keyManager.withHorizontalOrientation(this._getLayoutDirection());
     });
 

src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts

@@ -142,27 +142,29 @@ describe('MatTabNavBar', () => {
       expect(tabLinkElement.classList).toContain('mat-tab-disabled');
     });
 
-    it('should re-align the ink bar when the direction changes', () => {
+    it('should re-align the ink bar when the direction changes', fakeAsync(() => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;
 
       spyOn(inkBar, 'alignToElement');
 
       dirChange.next();
+      tick();
       fixture.detectChanges();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
-    });
+    }));
 
-    it('should re-align the ink bar when the tabs list change', () => {
+    it('should re-align the ink bar when the tabs list change', fakeAsync(() => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;
 
       spyOn(inkBar, 'alignToElement');
 
       fixture.componentInstance.tabs = [1, 2, 3, 4];
       fixture.detectChanges();
+      tick();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
-    });
+    }));
 
     it('should re-align the ink bar when the tab labels change the width', done => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;