[Tabs] md-tab-link: routerLinkActive.isActive error

[blyndcide]

Trying to use the new md-tab-nav-bar like this:

<nav md-tab-nav-bar>
	<a md-tab-link routerLink="/admin/management" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">Management</a>
</nav>

but get an error

TypeError: Cannot read property 'some' of undefined

Seems like this way should work after commit: angular/angular@c9f58cf

[DzmitryShylovich]

Pls add a plunkr with repro.

[andrewseguin]

Please use the issue template which helps us reproduce and diagnose the issue. Including a plunkr with this bug will help us determine what is happening.

[nayfin]

This is exactly how I am trying to use this feature as well, super easy way to keep your tabs in line with your location. I am working on a plunkr but I am running into some issues just getting it set up.

1. It seems like the Angular Material 2 template may not be getting the latest version of material, because if I try to add the [active]="someBoolean" directive to the anchor, I get yelled at by the compiler:

    VM1000 zone.min.js:1 Unhandled Promise rejection: Template parse errors:
Can't bind to 'active' since it isn't a known property of 'a'. ("ks" color="primary">
      <a md-tab-link *ngFor="let child of directory; let i = index;"
        [ERROR ->][active]="routerLinkActive"
        (click)="activateLink(i)">

I am assuming this is because it is a pretty new feature. I looked through systemjs.config and it seems to be asking for the latest, so I don't know where to go from here.

2. I set up the router in main.ts, but I am stuck. I think I set up everything correctly but am getting some errors.

If someone can help me resolve these two issues I can finish up the plunkr and we can get this feature working.

[nayfin]

Thanks for the fast update. I updated the plunkr. All the relevant code is in app.component.html. I commented the hell out of it explaining what we are looking for. Hopefully it is just a syntactic mistake. Please let me know if I can help in any way. Thanks for all your hard work, this is an amazing set of components and I hope that I can contribute soon.

[nayfin]

I just tried adding the safe navigation operator to the rla template variable i.e. [active]="rla?.isActive. I was hoping that perhaps it just need time to load its values, but no dice, I am still getting the same error messages.

[paladinu]

I'm getting the same error when trying to use the value in to set a class:
[ngClass]="{'icon icon_contact' : (rla && rla.isActive)}"
Results in
core.umd.js:2838 EXCEPTION: Error in /js/app/templates/nav-primary.html:18:38 caused by: Cannot read property 'some' of undefinedErrorHandler.handleError ....

[nayfin]

If you just need to add a class to the active link and remove it when it's not active, Angular has a built in directive that does that.

<a routerLink="/someUrl" [routerLinkActive]="['class1', 'class2']"> A cool link </a>

So, yours would be:

<a routerLink="/someUrl" [routerLinkActive]="['icon ', 'icon_contact']"> A cool link </a>

Here are some docs that might help.

Here is a plunkr where .class1 and .class2 follow the active link.

You will notice that it updates the classes even if the redirect comes from a link outside of the md-tab-link, but Material's border-bottom only registers ng-reflect-active="true" if redirected by the md-tab-link. Though it would follow the active link if we can get [active]="rla.isActive" to work.

[paladinu]

Yes, I use that else where. The problem I am trying to solve is that I want to apply a class to something that is a child or my routerlink. Like this:
<a routerLink="/someUrl"><span [routerLinkActive]="['class1', 'class2']">I want the class on this span</span></a>
From what I can tell that is what the RouterLinkActive directive export was trying to solve and it works fine if I throw it in as interpolation like class="{{rla.isActive?'icon_contact':''}}", but blows up when I try to use it inside the ngClass directive with the rla variable. If that routerLinkActive is supposed to work on children and I'm just doing something wrong please let me know.

[nayfin]

If you can update that plunkr to demonstrate what you are looking for, I think I should be able to help you.

[paladinu]

Here is a fork of that plunkr. My goal is to be able to apply a class to something within the router link rather than the routerlink itself. I think it is the same issue as the OP because they are both trying to access the isActive within an expression.

http://plnkr.co/edit/cUl8VS?p=preview

[nayfin]

Okay... I've done everything I can think of. It seems these particular attributes ,[active] and [ngClass], don't want to wait for rla.isActive to load and return a boolean. They won't wait even when using the Safe Navigation Operator ?., which is explicitly telling them to.

You can however use class bindings even in the child of the element containing routerLinkActive:

<a md-tab-link routerLink="someLink" routerLinkActive #rla="routerLinkActive"> <span [class.someClass]="rla.isActive">Working child link</span> </a>

I would argue that this is actually cleaner than using ngClass. Here is the plunkr.

Can anyone help me get the same functionality out of [active]='rla.isActive'? I can't understand why binding to one attribute works perfectly while binding to another refuses to.

[nayfin]

@DzmitryShylovich will your pull request #13341 address these issues?

[DzmitryShylovich]

@nayfin yes, but it's not clear when it will be merged

[antonmoiseev]

@DzmitryShylovich AFAICS your PR doesn't introduce backwards incompatible changes at the moment, please correct me if I'm wrong.

@andrewseguin considering @DzmitryShylovich's PR is safe to merge, could you raise the priority of this issue. I believe this is pretty much how tabs component will be used in the most of the apps.

/cc @jelbourn

P.S. Sorry for bothering during the holidays 😉. Happy Christmas! 🎄 🎅