Assaf Vilmovski Assaf Vilmovski - 1 year ago 124
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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download