feat(tabs): adds support for two-way bindings on selectedIndex (#702)

closes #687

Author: robertmesserle

src/components/tabs/tab-group.spec.ts

@@ -39,16 +39,31 @@ describe('MdTabGroup', () => {
       checkSelectedIndex(0);
 
       // select the second tab
-      let tabLabel = fixture.debugElement.query(By.css('.md-tab-label:nth-of-type(2)'));
+      let tabLabel = fixture.debugElement.queryAll(By.css('.md-tab-label'))[1];
       tabLabel.nativeElement.click();
       checkSelectedIndex(1);
 
       // select the third tab
-      tabLabel = fixture.debugElement.query(By.css('.md-tab-label:nth-of-type(3)'));
+      tabLabel = fixture.debugElement.queryAll(By.css('.md-tab-label'))[2];
       tabLabel.nativeElement.click();
       checkSelectedIndex(2);
     });
 
+    it('should support two-way binding for selectedIndex', async(() => {
+      let component = fixture.componentInstance;
+      component.selectedIndex = 0;
+
+      fixture.detectChanges();
+
+      let tabLabel = fixture.debugElement.queryAll(By.css('.md-tab-label'))[1];
+      tabLabel.nativeElement.click();
+
+      fixture.detectChanges();
+      fixture.whenStable().then(() => {
+        expect(component.selectedIndex).toBe(1);
+      });
+    }));
+
     it('should cycle through tab focus with focusNextTab/focusPreviousTab functions',
         fakeAsync(() => {
       let testComponent = fixture.componentInstance;
@@ -170,7 +185,7 @@ describe('MdTabGroup', () => {
   selector: 'test-app',
   template: `
     <md-tab-group class="tab-group"
-        [selectedIndex]="selectedIndex"
+        [(selectedIndex)]="selectedIndex"
         (focusChange)="handleFocus($event)"
         (selectChange)="handleSelection($event)">
       <md-tab>

src/components/tabs/tabs.ts

@@ -16,6 +16,7 @@ import {MdTabContent} from './tab-content';
 import {MdTabLabelWrapper} from './tab-label-wrapper';
 import {MdInkBar} from './ink-bar';
 import {Observable} from 'rxjs/Observable';
+import 'rxjs/add/operator/map';
 
 /** Used to generate unique ID's for each tab component */
 let nextId = 0;
@@ -68,6 +69,11 @@ export class MdTabGroup {
     return this._selectedIndex;
   }
 
+  /** Output to enable support for two-way binding on `selectedIndex`. */
+  @Output('selectedIndexChange') private get _selectedIndexChange(): Observable<number> {
+    return this.selectChange.map(event => event.index);
+  }
+
   private _onFocusChange: EventEmitter<MdTabChangeEvent> = new EventEmitter<MdTabChangeEvent>();
   @Output('focusChange') get focusChange(): Observable<MdTabChangeEvent> {
     return this._onFocusChange.asObservable();