Angular 2/4 - routerLinkActive not working properly

Question

I have a problem with my routerLinkActive.

Here is two Gifs to explain.

First problem: When i start the app, none of the routerLinkActive give the class active. But if i click on a different route, that finaly works.

When I click at first on the current route, the class isn't displayed.

Here is my code:

<ul class="nav">
   <li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}}">
       <a [routerLink]="[menuItem.path]">
           <i class="material-icons">{{menuItem.icon}}</i>
           <p>{{menuItem.title}}</p>
       </a>
   </li>
</ul>

Here is the tree of my route. (in red the component called)

and my route code:

import ...

const routes : Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent
      }, ..., {
        path: 'challenges',
        component: ImageRankComponent
      }, {
        path: 'niveau',
        component: LevelComponent
      }, {
        path: '',
        redirectTo: 'dashboard',
        pathMatch: 'full'
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  providers: [
    {
      provide: LocationStrategy,
      useClass: HashLocationStrategy
    }
  ],
  exports: [RouterModule]
})
export class HomeRoutingModule {}

and menuItem is:

this.menuItems = ROUTES.filter(menuItem => menuItem);
const ROUTES : RouteInfo[] = [{
    path: 'dashboard',
    title: 'Dashboard',
    icon: 'dashboard',
    class: ''
}, {
    path: 'challenges',
    title: 'Tous les challenges',
    icon: 'dashboard',
    class: ''
},
{
    path: 'niveau',
    title: 'Niveau en ligne',
    icon: 'dashboard',
    class: ''
}]

Do you know what can be my problem?

EDIT:

I have tried:

absolute route. ie:

 path: '/home/dashboard'

with

<a [routerLink]="menuItem.path">

and

<a [routerLink]="[menuItem.path]">

And the result is the same. Not working.

EDIT2:

adding:

[routerLinkActiveOptions]="{exact: true}" to:

<li *ngFor="let menuItem of menuItems" routerLinkActive="active" class="{{menuItem.class}} " [routerLinkActiveOptions]="{exact: true}">

doesnt resolve the problem.

EDIT3:

The extension Augury says me that routerLink is true for the good route. But the class isn't activated in the DOM.

EDIT4:

So, I have done some exploration.

I have found that if I put my menuComponent (sidebar) in the parent root, that is working, I the active class is displayed (But I don't want to put it in the parent)

EDIT5:

I have done a plunker of the situation... And the plunker works... I dont get it.

https://plnkr.co/edit/7KMlY2

Because you're applying the active class to an ancestor of the routerLink, you may need `[routerLinkActiveOptions]="{exact: true}"` on the list item. [More here](https://angular.io/api/router/RouterLinkActive). — Matthew Allen, Sep 12 '17 at 09:55
Thanks. But [routerLinkActiveOptions]="{exact: true}" doesnt resolve the problem :/ . — Wandrille, Sep 12 '17 at 09:59
That doesnt work. It put menuItem.path as a string and not a variable. But thanks — Wandrille, Sep 12 '17 at 12:37

score 27 · Accepted Answer · answered Sep 12 '17 at 12:59

27

Try this :

<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
    <a>Home</a>
</li>

answered Sep 12 '17 at 12:59

Vignesh

1,140
1
9
17

Wandrille · Answer 2 · 2018-01-10T10:55:26.123

13

So I have spend lot of time on this problem.

https://github.com/angular/angular/issues/19167

The thing is: That works with angular 2 but not angular 4.

I have found a hack for angular 4:

<li *ngFor="let menuItem of menuItems" [routerLinkActive]="" [ngClass]="rla.isActive?'active':''"  #rla="routerLinkActive"class="{{menuItem.class}}">
  <a [routerLink]="[menuItem.path]">
                <i class="material-icons">{{menuItem.icon}}</i>
                <p>{{menuItem.title}}</p>
            </a>
</li>

with:

[routerLinkActive]="" [ngClass]="rla.isActive?'active':''"  #rla="routerLinkActive"

EDIT ANGULAR 5 :

With Angular 5, the bug is gone!

edited Jan 10 '18 at 10:55

answered Sep 13 '17 at 07:57

Wandrille

6,267
3
20
43

Excuse me, but your answer is just a workaround. It has nothing to do with making routerLinkActive directive work. – tishma Oct 11 '17 at 14:00
@tishma This "hack" is working today. But it's still a hack. – Wandrille Oct 11 '17 at 22:15
@Wandrille can you tell me where i can read more about effecting class on `el a` if `el b` meets some logic. (like your answer) I want to see more examples like that – Omar May 08 '18 at 14:51
`#rla="` what is that called? – Omar May 08 '18 at 15:42
@Omar ***#rla="*** this is a template reference variable. See here: https://angular.io/guide/template-syntax#template-reference-variables--var- – Wandrille May 14 '18 at 07:05
@Omar I haven't really understood what you are looking for. But take a look at : https://angular.io/guide/cheatsheet – Wandrille May 14 '18 at 07:10

score 0 · Answer 3 · answered Sep 12 '17 at 15:45

0

Looks like the HomeComponent is lazily loaded. You don't have to move your routes to root component. Just try to add the RouterModule to the root component.

More here

answered Sep 12 '17 at 15:45

Surender Khairwa

601
4
17

Thanks for you help but unfortunetly, that doesnt change the result. – Wandrille Sep 12 '17 at 16:53

Angular 2/4 - routerLinkActive not working properly

3 Answers3

Linked