'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>

angular angular-router

Solution 1:^[1]

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.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	BlazK

'Angular router active link based only on 1st route level

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]