Search code examples
angularangular-router

Angular router active link based only on 1st route level

I have link to offer list on top of my website that goes to /offer/list on that page with the list user can click on any offer and go to /offer/detail?offer=1.

What I want is that no matter if user is on list or detail, I want to see offer link active.

Currently, my code is following and adds .active class only on /offer/list page and it doesn't work. Any ideas how to fix it, please?

<li class="nav-item"
 <a class="nav-link" [routerLink]="['/offer/list']"
  [class.active]="router.isActive('/offer', false)"
  routerLinkActive="active">
   Offer Regions
 </a>
</li>
Solution

  • maybe you can try something like this:

    <li class="nav-item"
 <a class="nav-link" [routerLink]="['/offer/list']"
  [class.active]="router.url.startsWith('/offer')"
  routerLinkActive="active">
   Offer Regions
 </a>
</li>

    I think this will give the desired result.