Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Sidenav does not set 'active' on current route, does not support routerLinkActive

See original GitHub issue

When you select a link in MaterializeCss’s sidenav, the link is set to active. The ng2-materialize sidenav doesn’t automatically set the class for a newly selected link and doesn’t appear to expose any way for the developer to do so. The standard way to do that in angular is to set the class for the item with routerLinkActive="['className']".

Proposal: replace <li [class.active]="active"> with <li [routerLinkActive]="['active']"> in sidenav-link.component.html and add the import for angular/router to the app module.

Issue Analytics

State:
Created 6 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

IAMtheIAMcommented, Oct 19, 2017

It looks like we’ll be good to go, with the PR suggested at Materialize. https://github.com/Dogfalo/materialize/pull/5285 It will allow .active to apply to any element instead of li or a. Then this:

<mz-sidenav-link>
  <a routerLink="/dashboard" routerLinkActive="active">Dashboard</a>
</mz-sidenav-link>
<mz-sidenav-link>
  <a routerLink="/users" routerLinkActive="active">Users</a>
</mz-sidenav-link>

will work as expected.

1reaction

wnippercommented, Aug 28, 2017

In case anyone else experiences this issue, the workaround I used was to fill the list item with the anchor and set the class on the anchor. This doesn’t hit all use cases, but it does work as expected. Example:

<mz-sidenav-link>
  <a routerLink="dashboard" routerLinkActive="active">Dashboard</a>
</mz-sidenav-link>
<mz-sidenav-link>
  <a routerLink="users" routerLinkActive="active">Users</a>
</mz-sidenav-link>