md-tab-nav-bar does not properly display active when child/relative routes are involved (removing the md- directives fix this)

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Any active routerLinks with the md-tab-link directive should show the material design active styling

What is the current behavior?

Paths with children and or relative paths seem to break the md-tab-nav-bar active styling (the individual tabs do not show the active styling when the corresponding route is active).

What are the steps to reproduce?

I created a repo reproducing the problem at: https://github.com/danwulff/md-tab-nav-bar-error-with-children

Steps to reproduce:

• In a terminal $ git clone https://github.com/danwulff/md-tab-nav-bar-error-with-children && cd md-tab-nav-bar-error-with-children && npm install && ng serve
• browser to http://localhost:4200/
• click ‘sub route’
• click through the tabs to see that the first 3 don’t work

The markup of the tabs is found within sub.component.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cdk, @angular/material: 2.0.0-beta.8 Tested in Google Chrome 59

[willshowell]

Just took a look and there are two issues with your markup:

1. md-tab-nav requires that only one tab is considered active at a time. This means that duplicating tabs for sub/ (or “one”) will behave unexpectedly. So the first step is to be sure to only use a single tab for any unique route

2. In your master branch, you are redefining #rla for each tab. AFAIK the scope of this reference is template-wide, so really you’re just overwriting it 3 times. Opt for using a unique template reference name for each tab or use *ngFor like below,

<nav md-tab-nav-bar>
  <a md-tab-link *ngFor="let tab of tabs"
    [routerLink]="[tab.path]"
    routerLinkActive
    #rla="routerLinkActive"
    [routerLinkActiveOptions]="{exact: true}"
    [active]="rla.isActive">
    {{ tab.label }}
  </a>
</nav>

  tabs = [
    { path: './', label: 'one' },
    { path: 'two/123', label: 'two with param' },
    { path: 'two', label: 'two' }
  ]

I hope this helps!

[willshowell]

Without diving into your repo, did you look at using an exact route match?

https://angular.io/api/router/RouterLinkActive#routerLinkActiveOptions

<div routerLinkActive="active-link" [routerLinkActiveOptions]="{exact: true}">
  <a routerLink="/user/jim">Jim</a>
  <a routerLink="/user/bob">Bob</a>
</div>