fix(tabs): tab nav bar not highlighting active tab if rendered after …

…init (angular#16624)

Fixes the `mat-tab-nav-bar` not aligning the ink bar to the active item, if the list of items comes in after the bar has been rendered.

Fixes angular#16607.

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

@@ -80,7 +80,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
   private _selectedIndexChanged = false;
 
   /** Emits when the component is destroyed. */
-  private readonly _destroyed = new Subject<void>();
+  protected readonly _destroyed = new Subject<void>();
 
   /** Whether the controls for pagination should be displayed */
   _showPaginationControls = false;

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

@@ -253,6 +253,22 @@ describe('MatTabNavBar', () => {
     expect(tabLink.tabIndex).toBe(3, 'Expected the tabIndex to be have been set to 3.');
   });
 
+  it('should select the proper tab, if the tabs come in after init', () => {
+    const fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
+    const instance = fixture.componentInstance;
+
+    instance.tabs = [];
+    instance.activeIndex = 1;
+    fixture.detectChanges();
+
+    expect(instance.tabNavBar.selectedIndex).toBe(-1);
+
+    instance.tabs = [0, 1, 2];
+    fixture.detectChanges();
+
+    expect(instance.tabNavBar.selectedIndex).toBe(1);
+  });
+
   describe('ripples', () => {
     let fixture: ComponentFixture<SimpleTabNavBarTestApp>;
 

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

@@ -46,6 +46,7 @@ import {FocusMonitor, FocusableOption} from '@angular/cdk/a11y';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {MatInkBar} from '../ink-bar';
 import {MatPaginatedTabHeader} from '../paginated-tab-header';
+import {startWith, takeUntil} from 'rxjs/operators';
 
 
 /**
@@ -123,7 +124,12 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentChec
   }
 
   ngAfterContentInit() {
-    this.updateActiveLink();
+    // We need this to run before the `changes` subscription in parent to ensure that the
+    // selectedIndex is up-to-date by the time the super class starts looking for it.
+    this._items.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
+      this.updateActiveLink();
+    });
+
     super.ngAfterContentInit();
   }