diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts index 186a30da0e29..8c539eee66e0 100644 --- a/src/material/tabs/paginated-tab-header.ts +++ b/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(); + protected readonly _destroyed = new Subject(); /** Whether the controls for pagination should be displayed */ _showPaginationControls = false; diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts index 162c09870bb1..0fd52053f6e1 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts +++ b/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; diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts index 003f77a0493b..393cc3dba5b9 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/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(); }