routerLinkActive is not working on md-list-item inside md-nav-list

[afriedma]

Bug, feature request, or proposal:

bug, routerLinkActive is not working on md-list-item inside md-nav-list

What is the expected behavior?

on active route change, call a function to set active item in the list

What is the current behavior?

no public methods are available, setting [routerLinkActive]="['mat-list-item-focus']" doesn't produce the expected result

What are the steps to reproduce?

https://plnkr.co/edit/s8UuFvLXTqGxGSxK3zXV?p=preview

What is the use-case or motivation for changing an existing behavior?

redirection to the page and pre-selecting/highlighting an item for the user

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

Angular 2.4.2/material 2.0.0-beta.2/Windows/electron 1.4.3

Is there anything else we should know?

[crisbeto]

routerLinkActive works as expected, however Material has an internal listener that will add/remove the class when the element is focused/blurred, which ends up removing it in your case. I recommend adding your own class that does the highlighting. You can see how it is done in Material here and here's an example of how to do it.

[afriedma]

Thank you for reply, but how can you doing in the context of the theme? I am unable to figure it out.

[afriedma]

https://plnkr.co/edit/KYKEk0UK5FAIdgjFyJIX?p=preview

here is the plunkr

[crisbeto]

You can refer to the theming guide.

[afriedma]

My second plunkr includes the theming. I took a crack at it and it doesn't work. The documentations is very limited, if you can point out the issue with my plunkr, I would very much appreciate it, as I am pressed against the deadline here. Thanks in advance.

[afriedma]

Also is there a way for force md-list-item to loose focus, as if nothing is selected. Cheers, Alex

…

________________________________ From: Kristiyan Kostadinov <notifications@github.com> Sent: Wednesday, April 5, 2017 1:09:27 PM To: angular/material2 Cc: afriedma; Author Subject: Re: [angular/material2] routerLinkActive is not working on md-list-item inside md-nav-list (#3884) You can refer to the theming guide.<https://material.angular.io/guide/theming-your-components> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#3884 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AV7wmxou2U17SGHfQK0hwior6e7wq0lAks5rs8rHgaJpZM4Mxpqc>.

[crisbeto]

That second Plunkr doesn't work, because you're referring to the SASS mixins using the Webpack syntax. You'll need to figure out how to import it in your build system. Alternatively you can hard-code the color as a quick fix, since the Material theming only computes the color. As for not showing focus on the element, it isn't supported, because it degrades the accessibility of the component.

[afriedma]

Thank you for your replies, even though the issue is closed, I really appreciate it.

I got active route to work with the theme. But now my issue is, when I redirect the route, I end up with two highlighted items in the nav list, last clicked item and item I routed too. My approach was to remove focus or simulate the click, but highlight on the originally clicked item won't go away.

And the weird thing is that, I only see this behavior with theme approach, I don't see it happening with explicit css class, just like you showed me.

Can you recommend a work around?

[afriedma]

Did you get a chance to look at my earlier reply? Please help. Cheers, Alex

…

________________________________ From: Kristiyan Kostadinov <notifications@github.com> Sent: Thursday, April 6, 2017 2:42:59 AM To: angular/material2 Cc: afriedma; Author Subject: Re: [angular/material2] routerLinkActive is not working on md-list-item inside md-nav-list (#3884) That second Plunkr doesn't work, because you're referring to the SASS mixins using the Webpack syntax. You'll need to figure out how to import it in your build system. Alternatively you can hard-code the color as a quick fix, since the Material theming only computes the color. As for not showing focus on the element, it isn't supported, because it degrades the accessibility of the component. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#3884 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AV7wm_i8CNPgk2Hhw0Izejxi_aATwi9Mks5rtIlzgaJpZM4Mxpqc>.

[crisbeto]

I'm not exactly sure why it's working with the explicit theme. If you really don't want that focused background, you can disable it via CSS completely:

.mat-nav-list .mat-list-item-content:hover, .mat-nav-list .mat-list-item-content.mat-list-item-focus {
  background: none;
}

[afriedma]

Hi, I tried adding your css, but it seems to not disable anything. Any other ideas?

[peimelo]

Hi,
this work for me:

<mat-nav-list>
  <a *ngFor="let navItem of navItems"
     mat-list-item
     (click)="start.close()"
     routerLinkActive
     #routerLinkActiveInstance="routerLinkActive"
     [attr.tabindex]="routerLinkActiveInstance.isActive ? 0 : -1"
     [routerLink]="[navItem.route]"
  >
    {{navItem.name}}
  </a>
</mat-nav-list>

https://github.com/angular/material2/blob/master/src/demo-app/demo-app/demo-app.html#L7-L10

[Robinyo]

See: #13084 (comment)