Angular 2 exact RouterLinkActive including fragments?

Issue

When using routerLink and routerLinkActive to apply CSS to a navigation bar, I'd like to also include the fragment information so that links are unique for sections within a homepage.

I've tried using [routerLinkActiveOptions]="{ exact: true }" wihtout any luck.

The relevant part of the navigation bar code is:

  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="inicio">Inicio</a>
  </li>
  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="invierte">Invierte</a>
  </li>
  <li routerLinkActive="active"
      [routerLinkActiveOptions]="{ exact: true }">
    <a routerLink="/sitio" fragment="contacto">Contacto</a>
  </li>

The three different URLs the above code visits are:

• /sitio#inicio
• /sitio#invierte
• /sitio#contacto

But when clickin any of them, all of them are marked as being active (because they correspond to the routerLink="/sitio" and the fragment=* information is not included in the check. This results in the navigation bar looking like this when clicking on any of them:

Any ideas on how to do this?

Solution

There is an open issue to support that https://github.com/angular/angular/issues/13205

routerLinkActive is a simple directive. You might be able to create a clone yourself with that extended functionality.

Answered By - Günter Zöchbauer