diff --git a/src/components/tabs/ink-bar.ts b/src/components/tabs/ink-bar.ts
index a2ea9fd6e1f8..2c30b982a629 100644
--- a/src/components/tabs/ink-bar.ts
+++ b/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';
}
}
diff --git a/src/components/tabs/tab-group.spec.ts b/src/components/tabs/tab-group.spec.ts
index e53868c4a976..d36bd81833a3 100644
--- a/src/components/tabs/tab-group.spec.ts
+++ b/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: `
+
+
+ {{ tab.label }}
+ {{ tab.content }}
+
+
+ `,
+ directives: [MD_TABS_DIRECTIVES]
+})
+class AsyncTabsTestApp {
+ private _tabs = [
+ { label: 'one', content: 'one' },
+ { label: 'two', content: 'two' }
+ ];
+
+ tabs: Observable;
+
+ constructor() {
+ this.tabs = Observable.create((observer: any) => {
+ requestAnimationFrame(() => observer.next(this._tabs));
+ });
+ }
+}
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index fd73ca73b019..01f1e86859c5 100644
--- a/src/components/tabs/tabs.ts
+++ b/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;
}
diff --git a/src/demo-app/tabs/tab-group-demo.html b/src/demo-app/tabs/tab-group-demo.html
index 884eff3ed0c9..51176c7ef35f 100644
--- a/src/demo-app/tabs/tab-group-demo.html
+++ b/src/demo-app/tabs/tab-group-demo.html
@@ -12,3 +12,18 @@ Tab Group Demo
+
+Async Tabs
+
+
+
+ {{tab.label}}
+
+ {{tab.content}}
+
+
+
+
+
+
+
diff --git a/src/demo-app/tabs/tab-group-demo.ts b/src/demo-app/tabs/tab-group-demo.ts
index 5e7c6c9cf692..b61851951bf8 100644
--- a/src/demo-app/tabs/tab-group-demo.ts
+++ b/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;
+ constructor() {
+ this.asyncTabs = Observable.create((observer: any) => {
+ setTimeout(() => {
+ observer.next(this.tabs);
+ }, 1000);
+ });
+ }
}