Angular Routing routerLinkActive

Question

For some reason when i go to heroes/2 link both of links get .active class from routerLinkActive, but i expect only c2.component should get it. What is my mistake?

PS If i go heroes link = only this link get active.

    const appRoutes: Routes = [
            { path: 'heros', component: c1},
            { path: 'heros/:id', component: c2},
        ];

  <a routerLink="/heros" routerLinkActive="active">heros</a>
  <a routerLink="/heros/2" routerLinkActive="active">hero 2</a>

Answer 1

You can configure RouterLinkActive by passing exact: true. This will add the classes only when the url matches the link exactly.

<a routerLink="/heros" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">heros</a>
<a routerLink="/heros/2" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact: true}">hero 2</a>

Answer 2

You need to set the exact paramater to true , in order to set the class only to exact mathches:

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