fix(navbar): update ink bar when links change

src/demo-app/tabs/tabs-demo.html

@@ -1,5 +1,8 @@
 <h1>Tab Nav Bar</h1>
 
+<button md-button (click)="tabLinks.shift()">Remove tab</button>
+<button md-button (click)="swapTabLinks()">Swap first two</button>
+
 <div class="demo-nav-bar">
   <nav md-tab-nav-bar aria-label="weather navigation links">
     <a md-tab-link

src/demo-app/tabs/tabs-demo.ts

@@ -83,6 +83,12 @@ export class TabsDemo {
   deleteTab(tab: any) {
     this.dynamicTabs.splice(this.dynamicTabs.indexOf(tab), 1);
   }
+
+  swapTabLinks() {
+    const temp = this.tabLinks[0];
+    this.tabLinks[0] = this.tabLinks[1];
+    this.tabLinks[1] = temp;
+  }
 }
 
 

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

@@ -37,20 +37,19 @@ describe('MdTabNavBar', () => {
 
     beforeEach(() => {
       fixture = TestBed.createComponent(SimpleTabNavBarTestApp);
+      fixture.detectChanges();
     });
 
     it('should change active index on click', () => {
-      let component = fixture.debugElement.componentInstance;
-
       // select the second link
       let tabLink = fixture.debugElement.queryAll(By.css('a'))[1];
       tabLink.nativeElement.click();
-      expect(component.activeIndex).toBe(1);
+      expect(fixture.componentInstance.activeIndex).toBe(1);
 
       // select the third link
       tabLink = fixture.debugElement.queryAll(By.css('a'))[2];
       tabLink.nativeElement.click();
-      expect(component.activeIndex).toBe(2);
+      expect(fixture.componentInstance.activeIndex).toBe(2);
     });
 
     it('should re-align the ink bar when the direction changes', () => {
@@ -64,6 +63,17 @@ describe('MdTabNavBar', () => {
       expect(inkBar.alignToElement).toHaveBeenCalled();
     });
 
+    it('should re-align the ink bar when the tabs change', () => {
+      const inkBar = fixture.componentInstance.tabNavBar._inkBar;
+
+      spyOn(inkBar, 'alignToElement');
+
+      fixture.componentInstance.tabs = [1, 2, 3, 4];
+      fixture.detectChanges();
+
+      expect(inkBar.alignToElement).toHaveBeenCalled();
+    });
+
     it('should re-align the ink bar when the window is resized', fakeAsync(() => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;
 
@@ -97,15 +107,20 @@ describe('MdTabNavBar', () => {
   selector: 'test-app',
   template: `
     <nav md-tab-nav-bar>
-      <a md-tab-link [active]="activeIndex === 0" (click)="activeIndex = 0">Tab One</a>
-      <a md-tab-link [active]="activeIndex === 1" (click)="activeIndex = 1">Tab Two</a>
-      <a md-tab-link [active]="activeIndex === 2" (click)="activeIndex = 2">Tab Three</a>
+      <a md-tab-link
+         *ngFor="let tab of tabs; let index = index"
+         [active]="activeIndex === index"
+         (click)="activeIndex = index">
+        Tab link
+      </a>
     </nav>
   `
 })
 class SimpleTabNavBarTestApp {
   @ViewChild(MdTabNavBar) tabNavBar: MdTabNavBar;
 
+  tabs = [0, 1, 2];
+
   activeIndex = 0;
 }
 

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

@@ -1,25 +1,29 @@
 import {
+  AfterContentInit,
   Component,
-  Input,
-  ViewChild,
-  ElementRef,
-  ViewEncapsulation,
+  ContentChildren,
   Directive,
-  NgZone,
+  ElementRef, forwardRef,
   Inject,
-  Optional,
+  Input,
+  NgZone,
   OnDestroy,
-  AfterContentInit,
+  Optional,
+  QueryList,
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import {MdInkBar} from '../ink-bar';
 import {MdRipple} from '../../core/ripple/index';
 import {ViewportRuler} from '../../core/overlay/position/viewport-ruler';
-import {MD_RIPPLE_GLOBAL_OPTIONS, RippleGlobalOptions, Dir, Platform} from '../../core';
+import {Dir, MD_RIPPLE_GLOBAL_OPTIONS, Platform, RippleGlobalOptions} from '../../core';
 import {Observable} from 'rxjs/Observable';
 import {Subscription} from 'rxjs/Subscription';
 import 'rxjs/add/operator/auditTime';
+import 'rxjs/add/operator/takeUntil';
 import 'rxjs/add/observable/of';
 import 'rxjs/add/observable/merge';
+import {Subject} from 'rxjs/Subject';
 
 /**
  * Navigation component matching the styles of the tab group header.
@@ -37,10 +41,14 @@ export class MdTabNavBar implements AfterContentInit, OnDestroy {
   /** Combines listeners that will re-align the ink bar whenever they're invoked. */
   private _realignInkBar: Subscription = null;
 
+  /** Subject that emits when the component has been destroyed. */
+  private _onDestroy = new Subject<void>();
+
   _activeLinkChanged: boolean;
   _activeLinkElement: ElementRef;
 
   @ViewChild(MdInkBar) _inkBar: MdInkBar;
+  @ContentChildren(forwardRef(() => MdTabLink)) _tabLinks: QueryList<MdTabLink>;
 
   constructor(@Optional() private _dir: Dir, private _ngZone: NgZone) { }
 
@@ -51,13 +59,20 @@ export class MdTabNavBar implements AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit(): void {
+    /** Realign the ink bar if the list of tab links have been added, removed, or moved. */
+    this._tabLinks.changes
+        .takeUntil(this._onDestroy)
+        .subscribe(() => this._alignInkBar());
+
     this._realignInkBar = this._ngZone.runOutsideAngular(() => {
       let dirChange = this._dir ? this._dir.dirChange : Observable.of(null);
       let resize = typeof window !== 'undefined' ?
           Observable.fromEvent(window, 'resize').auditTime(10) :
           Observable.of(null);
 
-      return Observable.merge(dirChange, resize).subscribe(() => this._alignInkBar());
+      return Observable.merge(dirChange, resize)
+          .takeUntil(this._onDestroy)
+          .subscribe(() => this._alignInkBar());
     });
   }
 
@@ -70,10 +85,7 @@ export class MdTabNavBar implements AfterContentInit, OnDestroy {
   }
 
   ngOnDestroy() {
-    if (this._realignInkBar) {
-      this._realignInkBar.unsubscribe();
-      this._realignInkBar = null;
-    }
+    this._onDestroy.next();
   }
 
   /** Aligns the ink bar to the active link. */

tools/gulp/packaging/rollup-helpers.ts

@@ -42,6 +42,7 @@ const ROLLUP_GLOBALS = {
   'rxjs/add/operator/share': 'Rx.Observable.prototype',
   'rxjs/add/operator/startWith': 'Rx.Observable.prototype',
   'rxjs/add/operator/switchMap': 'Rx.Observable.prototype',
+  'rxjs/add/operator/takeUntil': 'Rx.Observable.prototype',
   'rxjs/add/operator/toPromise': 'Rx.Observable.prototype',
   'rxjs/BehaviorSubject': 'Rx',
   'rxjs/Observable': 'Rx',