refactor(tabs-demo): replace active link index with active router link isActive property (#4729)

Motivation is to remove the current comment "can be removed if routerLink exposes if it is active". Current router link implementation does allow the itActive flag.

Author: ambaumann

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

@@ -5,8 +5,8 @@ <h1>Tab Nav Bar</h1>
     <a md-tab-link
        *ngFor="let tabLink of tabLinks; let i = index"
        [routerLink]="tabLink.link"
-       [active]="activeLinkIndex === i"
-       (click)="activeLinkIndex = i">
+       routerLinkActive #rla="routerLinkActive"
+       [active]="rla.isActive">
       {{tabLink.label}}
     </a>
   </nav>

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<any>;
 
-  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 {