Sidenav does not set 'active' on current route, does not support routerLinkActive about ngx-materialize HOT 7 OPEN

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>

from ngx-materialize.

It looks like we'll be good to go, with the PR suggested at Materialize. Dogfalo/materialize#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.

from ngx-materialize.

Hi @wnipper,

Thanks for the workaround. We're gonna have to take a look at it before to take action.

Just wondering what you meant by "it doesn't hit all use cases" ?
This could be helpfull for the fix investigation.

from ngx-materialize.

I agree with @wnipper It should hook into the Angular routerLinkActive directive in order to set the class. Setting it manually doesn't really make too much sense, because how will we manage setting the property based on router path?

The <li [routerLinkActive]="['active']">solution that @wnipper provided won't work, however. That;s because routerLinkActive only works on an tag with routerLink set, which doesn't exist in the sidenav component, routerlink is set by the user on their own a tags.

However his workaround is more like the correct way to use routerLinkActive than a workaround.

Then the only change needed is to change css

.side-nav li.active {
    background-color: rgba(0, 0, 0, 0.05);
}

to

.side-nav a.active {
    background-color: rgba(0, 0, 0, 0.05);
}

That can be done in your own css.

Otherwise the mz-sidenav-link will need a new property added called routerLink to allow the user to set the router link there, and then in the template it would be

from ngx-materialize.

I was able to modify the sidenav component to get it working properly, using angular's native implementation. I made a PR, please review #226

An alternative to this is to submit a PR to Materialize for the CSS change I proposed above. I don't know if routerLink is recommended to be set on the a or if setting on li is good, but it works both ways. I raised an issue over here at Dogfalo/materialize#5284

from ngx-materialize.

I think the best fix would be the tomscholz proposition on the Materialize issue you created.

.side-nav .active {
    background-color: rgba(0, 0, 0, 0.05);
}

Allowing active class to be applied on the a tag would solve the problem without having to change anything.

Adding routerLink property binds the component to @angular/router and does not help people that would use alternate router (god knows why they would).

from ngx-materialize.

OK, no problem. I'll update here when they respond to that issue.

from ngx-materialize.