Angular routerLinkActive with nested routes

Question

I have problem. On my page, I have route /productsList. And I have list-group :

<div class="sticky-top">

  <ul class="list-group">
    <a  class="list-group-item list-group-item-action"  [routerLink]="['/productsList']"   routerLinkActive="active"  > sad</a>

    <a *ngFor="let products of categoryProduc; let i = index"  [routerLink]="[products.name]"  routerLinkActive="active"   class="list-group-item list-group-item-action">
      {{ products.name }}
    </a>
  </ul>

</div>

When I click on the some Item of list, route is changed example: /productsList/product and item is selected, but my :

<a  class="list-group-item list-group-item-action"  [routerLink]="['/productsList']"   routerLinkActive="active"  > sad</a>

Is always selected because I always have /productsList, I want when I have nested route to be disable.

check this link (https://stackoverflow.com/questions/39181539/why-angular2-routerlinkactive-sets-active-class-to-multiple-links) — Abhishek, Dec 25 '18 at 10:06

score 7 · Answer 1 · answered Dec 25 '18 at 10:03

You have to define [routerLinkActiveOptions]="{ exact: true }" to make the difference between /productsList and /productsList/product:

<a class="list-group-item list-group-item-action" [routerLink]="['/productsList']" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">not sad</a>

Angular routerLinkActive with nested routes

1 Answers1