I have a problem with my routerLinkActive.
Here is two Gifs to explain.
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.
Try this :
<li routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a>Home</a>
</li>