diff --git a/src/demo-app/tabs/tabs-demo.html b/src/demo-app/tabs/tabs-demo.html
index 3e7ead185e3b..bc89ba1881a6 100644
--- a/src/demo-app/tabs/tabs-demo.html
+++ b/src/demo-app/tabs/tabs-demo.html
@@ -5,8 +5,8 @@
Tab Nav Bar
+ routerLinkActive #rla="routerLinkActive"
+ [active]="rla.isActive">
{{tabLink.label}}
diff --git a/src/demo-app/tabs/tabs-demo.ts b/src/demo-app/tabs/tabs-demo.ts
index aa3d9ce124a4..e69b5fc6f8cd 100644
--- a/src/demo-app/tabs/tabs-demo.ts
+++ b/src/demo-app/tabs/tabs-demo.ts
@@ -1,5 +1,4 @@
import {Component, ViewEncapsulation} from '@angular/core';
-import {Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';
@Component({
@@ -16,7 +15,6 @@ export class TabsDemo {
{label: 'Rain', link: 'rainy-tab'},
{label: 'Fog', link: 'foggy-tab'},
];
- activeLinkIndex = 0;
// Standard tabs demo
tabs = [
@@ -62,18 +60,12 @@ export class TabsDemo {
asyncTabs: Observable;
- constructor(private router: Router) {
+ constructor() {
this.asyncTabs = Observable.create((observer: any) => {
setTimeout(() => {
observer.next(this.tabs);
}, 1000);
});
-
- // Initialize the index by checking if a tab link is contained in the url.
- // This is not an ideal check and can be removed if routerLink exposes if it is active.
- // https://github.com/angular/angular/pull/12525
- this.activeLinkIndex =
- this.tabLinks.indexOf(this.tabLinks.find(tab => router.url.indexOf(tab.link) != -1));
}
addTab(includeExtraContent: boolean): void {