Angular, RouterLinkActive including fragments?

In an Angular application, for routing we use routerActiveLink to add CSS class to the link or the parent element when the user navigates to the links.

<li routerLinkActive="active activeClass2">
    <a routerLink="/page">Inicio</a>
  </li>

The above code will add active and activeClass2 to the li element when the user navigates to the /page URL.

But sometimes we want to navigate to the section on the page using old school with the help of segments having id attached to the segment/div.

For our project, we used the same page navigation using these segments(id). For the segment navigation on the page, Angular has a directive called fragment. so the code will look live this.

  <li routerLinkActive="active">
    <a routerLink="/sitio" fragment="inicio">Inicio</a>
  </li>
  <li routerLinkActive="active">
    <a routerLink="/sitio" fragment="invierte">Invierte</a>
  </li>
  <li routerLinkActive="active">
    <a routerLink="/sitio" fragment="contacto">Contacto</a>
  </li>

The above code works, but the problem with the above code is that routerLinkActive will add active class to all the elements.

The solution, for the above problem according to some users is adding [routerLinkActiveOptions]="{ exact: true }" along with the `routerLinkActive`, but this seems to work only after the router version 7.2.4 .

My solution is ActivatedRoute . Inject this into the Component.

class ComponentClass{
  activeFragment = this.route.fragment.pipe(share()); 
  constructor(public route: ActivatedRoute){}
}

Now use this in the template as.

<li [class.active]="(activeFragment | async)==='inicio'">
    <a routerLink="/sitio" fragment="inicio">Inicio</a>
</li>
<li [class.active]="(activeFragment | async)==='invierte'">
    <a routerLink="/sitio" fragment="invierte">Invierte</a>
</li>
<li [class.active]="(activeFragment | async)==='contacto'">
    <a routerLink="/sitio" fragment="contacto">Contacto</a>
</li

Let me know if this code helps you or you have a better solution to this.

Thanks!