Assaf Vilmovski Assaf Vilmovski - 9 months ago 73
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


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