Assaf Vilmovski Assaf Vilmovski - 2 months ago 21
AngularJS Question

How to routerLinkActive non anchor link

I have two links on my application component

<a routerLink="/dashboard" routerLinkActive="active">Dashboard</a> --> app/dashboard
<a routerLink="/heroes" routerLinkActive="active">Heroes</a> --> app/heroes


After I click a hero I go into "hero details" screen, but the "Heroes" link is not active.

I'd like to highlight "heroes" anchor when I`m on app/detail/:id

path: 'detail/:id'


That's my full routes const:

const appRoutes: Routes = [
{
path: '',
redirectTo: '/dashboard',
pathMatch: 'full'
},
{
path: 'detail/:id',
component: HeroDetailComponent
},
{
path: 'dashboard',
component: DashboardComponent
},
{
path: 'heroes',
component: HeroesComponent
}
];


your kind assistance appreciated

Answer

Only method I know of to keep the routerLinkActive enabled on a route is to use child routes. Updating the routes as such:

{path: 'heroes',children: [
    {path: "", component: HeroesComponent},
    {path: "detail/:id", component: HeroDetailComponent}
]}

will let you navigate to /heroes and /heroes/detail/:id and leave /heroes as the active route

Further, there are options you can add to the route if you do NOT want this behavior on the parent route, you can find those here

Comments