Reputation: 6801

Angular 2/4 - routerLinkActive not working properly

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

Upvotes: 26

Answers (4)

sivy

Reputation: 451

For those using standalone component, remember to import RouterLinkActive

Upvotes: 8

Wandrille

Reputation: 6801

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!

Upvotes: 14

Surender Khairwa

Reputation: 614

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

Upvotes: 0

Vignesh

Reputation: 1212

Try this :

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

Upvotes: 31

Angular 2/4 - routerLinkActive not working properly

Answers (4)

Related Questions