fix(tabs): adds support for async tabs (#639)

closes #574

Author: robertmesserle

src/components/tabs/ink-bar.ts

@@ -27,7 +27,7 @@ export class MdInkBar {
    * @returns {string}
    */
   private _getLeftPosition(element: HTMLElement): string {
-    return element.offsetLeft + 'px';
+    return element ? element.offsetLeft + 'px' : '0';
   }
 
   /**
@@ -36,6 +36,6 @@ export class MdInkBar {
    * @returns {string}
    */
   private _getElementWidth(element: HTMLElement): string {
-    return element.offsetWidth + 'px';
+    return element ? element.offsetWidth + 'px' : '0';
   }
 }

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

@@ -10,6 +10,7 @@ import {TestComponentBuilder, ComponentFixture} from '@angular/compiler/testing'
 import {MD_TABS_DIRECTIVES, MdTabGroup} from './tabs';
 import {Component} from '@angular/core';
 import {By} from '@angular/platform-browser';
+import {Observable} from 'rxjs/Observable';
 
 describe('MdTabGroup', () => {
   let builder: TestComponentBuilder;
@@ -86,6 +87,26 @@ describe('MdTabGroup', () => {
     });
   });
 
+  describe('async tabs', () => {
+    beforeEach(async(() => {
+      builder.createAsync(AsyncTabsTestApp).then(f => fixture = f);
+    }));
+
+    it('should show tabs when they are available', async(() => {
+      let labels = fixture.debugElement.queryAll(By.css('.md-tab-label'));
+
+      expect(labels.length).toBe(0);
+
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        fixture.detectChanges();
+        labels = fixture.debugElement.queryAll(By.css('.md-tab-label'));
+        expect(labels.length).toBe(2);
+      });
+    }));
+  });
+
   /**
    * Checks that the `selectedIndex` has been updated; checks that the label and body have the
    * `md-active` class
@@ -130,3 +151,30 @@ describe('MdTabGroup', () => {
 class SimpleTabsTestApp {
   selectedIndex: number = 1;
 }
+
+@Component({
+  selector: 'test-app',
+  template: `
+    <md-tab-group class="tab-group">
+      <md-tab *ngFor="let tab of tabs | async">
+        <template md-tab-label>{{ tab.label }}</template>
+        <template md-tab-content>{{ tab.content }}</template>
+      </md-tab>
+   </md-tab-group>
+  `,
+  directives: [MD_TABS_DIRECTIVES]
+})
+class AsyncTabsTestApp {
+  private _tabs = [
+    { label: 'one', content: 'one' },
+    { label: 'two', content: 'two' }
+  ];
+
+  tabs: Observable<any>;
+
+  constructor() {
+    this.tabs = Observable.create((observer: any) => {
+      requestAnimationFrame(() => observer.next(this._tabs));
+    });
+  }
+}

src/components/tabs/tabs.ts

@@ -64,7 +64,7 @@ export class MdTabGroup {
    * ViewChildren references are ready.
    */
   private get _currentLabelWrapper(): HTMLElement {
-    return this._labelWrappers
+    return this._labelWrappers && this._labelWrappers.toArray()[this.selectedIndex]
         ? this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement
         : null;
   }

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

@@ -12,3 +12,18 @@ <h1>Tab Group Demo</h1>
     </template>
   </md-tab>
 </md-tab-group>
+
+<h1>Async Tabs</h1>
+
+<md-tab-group class="demo-tab-group">
+  <md-tab *ngFor="let tab of asyncTabs | async">
+    <template md-tab-label>{{tab.label}}</template>
+    <template md-tab-content>
+      {{tab.content}}
+      <br>
+      <br>
+      <br>
+      <md-input placeholder="Tab Label" [(ngModel)]="tab.label"></md-input>
+    </template>
+  </md-tab>
+</md-tab-group>

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

@@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
 import {MD_TABS_DIRECTIVES} from '@angular2-material/tabs/tabs';
 import {MdToolbar} from '@angular2-material/toolbar/toolbar';
 import {MdInput} from '@angular2-material/input/input';
+import {Observable} from 'rxjs/Observable';
 
 @Component({
   moduleId: module.id,
@@ -17,4 +18,12 @@ export class TabsDemo {
     { label: 'Tab Two', content: 'This is the body of the second tab' },
     { label: 'Tab Three', content: 'This is the body of the third tab' },
   ];
+  asyncTabs: Observable<any>;
+  constructor() {
+    this.asyncTabs = Observable.create((observer: any) => {
+      setTimeout(() => {
+        observer.next(this.tabs);
+      }, 1000);
+    });
+  }
 }