title: Angular 6 Material: mat-tab-link be selected by underlining bar
body: <p>I have a <code>mat-tab-nav-bar</code> navigation bar for my website, but the <code>mat-tab-link</code> blue underlining bar won't chase the active button. It just stays at the first button, and doesn't move. The buttons do turn into active state though in the sense that the background color changes, and they route well to their corresponding pages.</p>
  
  <p>Here's the <code>app.component.ts</code>:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  export class AppComponent {
    navLinks = [
      { path: '', label: 'The Problem' },
      { path: 'the-solution', label: 'The Solution' },
      { path: 'the-game', label: 'The Game' },
      { path: 'probability-calculator', label: 'Probability calculator' },
    ];
  }
  </code></pre>
  
  <p>And here's the <code>app.component.html</code>:</p>
  
  <pre><code>&lt;nav mat-tab-nav-bar&gt;
    &lt;a mat-tab-link
       *ngFor="let link of navLinks"
       [routerLink]="link.path"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive"&gt;
      {{link.label}}
    &lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Here is the <code>app.module.ts</code>:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { MatTabsModule } from '@angular/material/tabs';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
  import { AppRoutingModule } from './app-routing.module';
  
  import { AppComponent } from './app.component';
  import { TheProblemComponent } from './the-problem/the-problem.component';
  import { TheSolutionComponent } from './the-solution/the-solution.component';
  import { ProbabilityCalculatorComponent } from './probability-calculator/probability-calculator.component';
  import { TheGameComponent } from './the-game/the-game.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      TheProblemComponent,
      TheSolutionComponent,
      ProbabilityCalculatorComponent,
      TheGameComponent
    ],
    imports: [
      AppRoutingModule,
      BrowserModule,
      BrowserAnimationsModule,
      MatTabsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>What am I missing? Thank you!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I edited the <code>app.component.html</code> like this to find out some more about the link "active" state:</p>
  
  <pre><code>&lt;nav mat-tab-nav-bar&gt;
    &lt;a mat-tab-link
       *ngFor="let link of navLinks"
       [routerLink]="link.path"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive"&gt;
      {{link.label}}
      &lt;div style="color: red; margin-left: 10px;"&gt;
          &lt;span *ngIf="rla.isActive"&gt; Is active!&lt;/span&gt;
          &lt;span *ngIf="!rla.isActive"&gt; Is not active...&lt;/span&gt;
      &lt;/div&gt;
    &lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>As it turns out, the first link in the menu always remains active (<code>rla.isActive</code>) - also when I'm navigating to other pages. All other links turn off their active state just fine, and only get activated when they are navigated to. How do I turn off the active state of the first link when navigating to other links?</p>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>Adding <code>app-routing.module.ts</code> code:</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  import { TheProblemComponent } from './the-problem/the-problem.component';
  import { TheSolutionComponent } from './the-solution/the-solution.component';
  import { TheGameComponent } from './the-game/the-game.component';
  import { ProbabilityCalculatorComponent } from './probability-calculator/probability-calculator.component';
  
  const routes: Routes = [
      { path: '', component: TheProblemComponent },
      { path: 'the-solution', component: TheSolutionComponent },
      { path: 'the-game', component: TheGameComponent },
      { path: 'probability-calculator', component: ProbabilityCalculatorComponent }
  ];
  
  
  @NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
  })
  export class AppRoutingModule { }
  </code></pre>