Demonstration of md-tab-link: routerLinkActive.isActive error

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Material Plunker</title>
    
    <!--
        IMPORTANT: Best practice is to set <base href="/"> but, because of some prefixing to the url done by 
        plunkr, this throws an error:
        
        (SystemJS) XHR error (400 Bad Request) loading http://run.plnkr.co/main.ts(…)
        
        So we simply set it to an empty string and everthing works here, just make sure you don't do this in 
        your local environment
    -->
    <base href="">
    
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Load common libraries -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.3/typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.25/zone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    
    <!-- Load Bundle from Asset Host -->
    <script src="https://plnkr-test.firebaseapp.com/components.bundle.js?sha=bf44c16"></script>
  
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>

    <script>
      System
        .import('main.ts')
        .catch(console.error.bind(console));
    </script>
    
    <!-- Load the Angular Material 2 stylesheet -->
    <link href="https://unpkg.com/@angular/material/core/theming/prebuilt/purple-green.css" rel="stylesheet">

  </head>

  <body>
    <material-app>Loading the routerLinkActive Demonstration...</material-app>
  </body>

</html>

<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

import {Component, OnInit} from '@angular/core';
import {bootstrap} from '@angular/platform-browser-dynamic';
import { Router } from '@angular/router';

export class Child {
  title: string;
  route: string;
}
const DIRECTORY : Child[] = [
  {title: "Home", route: "home"},
  {title: "Garden", route: "garden"},
];

@Component({
  selector: 'material-app',
  templateUrl: 'app.component.html',
  styles: [`
    body{
      margin: 0px;
    }
    .toolbar-fill{
      flex: 1 1 auto;
    }
  `]
})
export class AppComponent implements OnInit{
  
  directory: Child[] = DIRECTORY;

  private rlaSafe: boolean = false;
  
  public ngAfterViewInit() {
    this.rlaSafe = true;
  }
}

@Component({
  selector: 'home',
  template: `
    <md-card>
      <md-card-title-group>
        <md-card-title>Routed body of the HOME tab.</md-card-title>
        <md-card-subtitle>Subtitle</md-card-subtitle>
        <img src="http://www.iconsfind.com/wp-content/uploads/2015/11/20151125_5655088ba5cdf-210x210.png" md-card-md-image>
      </md-card-title-group>
      <button routerLink="/garden" md-raised-button color="accent">To Garden
        <md-icon>arrow_forward</md-icon>
      </button>
    </md-card>
  `,
  styles: [`
    md-card{
      margin: 15px;
    }
  `]
})
export class HomeComponent {}

@Component({
  selector: 'garden',
  template: `
    <md-card>
      <md-card-title-group>
          <md-card-title>Routed body of the GARDEN tab.</md-card-title>
          <md-card-subtitle>Subtitle</md-card-subtitle>
          <img src="http://media.istockphoto.com/vectors/garden-flat-design-vector-icon-vector-id507080566?k=6&m=507080566&s=170667a&w=0&h=gneq20iwVQWAXa2QNZafcVhMHKADsUOmHBaEWER5xsE=" md-card-md-image>
      </md-card-title-group>
      <button routerLink="/home" md-raised-button color="accent">Go Home
        <md-icon>arrow_forward</md-icon>
      </button>
    </md-card>
  `,
  styles: [`
    md-card{
      margin: 15px;
    }
  `]
})
export class GardenComponent {}

<md-toolbar color="accent">
  <span>
    Angular Material 2 App
  </span>
  <span class="toolbar-fill">
  </span>
  
  <span >
    <nav class='tab-nav-bar' md-tab-nav-bar aria-label="Directory Links" color="accent">
      
      <a md-tab-link *ngFor="let child of directory"
        routerLink="{{child.route}}"
        routerLinkActive #rla="routerLinkActive"
        [active]="rlaSafe && rla.isActive"> 
        {{child.title}}
      </a>
      
    </nav>
  </span>
      
</md-toolbar>
<router-outlet></router-outlet>

<!--
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->

/** Add Transpiler for Typescript */
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    },
    'vendor': {
      defaultExtension: 'js'
    }
  }
});

System.config({
  map: {
    'main': 'main.js',
    
    // Angular specific mappings.
    '@angular/core': 'http://unpkg.com/@angular/core/bundles/core.umd.js',
    '@angular/common': 'http://unpkg.com/@angular/common/bundles/common.umd.js',
    '@angular/compiler': 'http://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
    '@angular/http': 'http://unpkg.com/@angular/http/bundles/http.umd.js',
    '@angular/forms': 'http://unpkg.com/@angular/forms/bundles/forms.umd.js',
    '@angular/router': 'http://unpkg.com/@angular/router/bundles/router.umd.js',
    '@angular/platform-browser': 'http://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
    '@angular/platform-browser-dynamic': 'http://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
    '@angular/material': 'https://rawgit.com/angular/material2-builds/master/bundles/material.umd.js',
    
    // Rxjs mapping
    'rxjs': 'https://unpkg.com/rxjs',
  },
  packages: {
    // Thirdparty barrels.
    'rxjs': { main: 'index' },
  }
});

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */

import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent, HomeComponent,GardenComponent} from './app.component';
import {MaterialModule} from '@angular/material';
import {Routes, RouterModule, Router} from '@angular/router';

const routes: Routes = [
  {path: '', redirectTo: '/home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent },
  {path: 'garden', component: GardenComponent},
];
@NgModule({

  imports: [
    BrowserModule,
    RouterModule.forRoot(routes),
    MaterialModule.forRoot(),
  ],

  declarations: [
    AppComponent,
    HomeComponent,
    GardenComponent
  ],
  bootstrap: [AppComponent],
  providers: []
})
export class PlunkerAppModule {}

platformBrowserDynamic().bootstrapModule(PlunkerAppModule);

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */