Angular 2 routerLinkActive always active for base path

Question

I have this code for my navbar:

<nav>
  <a [routerLink]="['/']" [routerLinkActive]="['nav-active']">HOME</a>
  <a [routerLink]="['/about']" [routerLinkActive]="['nav-active']">ABOUT</a>
  <a [routerLink]="['/records']" [routerLinkActive]="['nav-active']">RECORDS</a>
</nav>

The problem is the HOME nav point always gets the class because / seems to be always active. Is this avoidable with a small and simple solution?

Thanks for the help

Edit:

this is the solution for now:

[routerLinkActiveOptions]="{ exact: true }"

Same issue here

Richard Peck
– Richard Peck

2016-10-07 11:07:22 +00:00
Commented Oct 7, 2016 at 11:07 — Richard Peck
– Richard Peck, Commented Oct 7, 2016 at 11:07

Community · Accepted Answer · 2017-05-23 12:10:48Z

104

As suggested by @TomRaine in this answer, you can add the property [routerLinkActiveOptions]="{ exact: true }" to your element:

<nav>
  <a [routerLink]="['/']" 
      [routerLinkActive]="['nav-active']"
      [routerLinkActiveOptions]="{ exact: true }">
    HOME
  </a>
  ...
</nav>

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Mar 5, 2017 at 20:21

Andrea

16.7k20 gold badges71 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Santosh Over a year ago

If I go to about page from home page and refresh the page, I still see home page active. Any idea how to fixed this ?

Peter Lorei · Accepted Answer · 2020-02-06 18:07:31Z

47

This appears to be a known issue. A few workarounds are detailed in this thread: https://github.com/angular/angular/issues/8397

From Github Thread:

"you need to add an additional option to your routerLink."

[routerLinkActiveOptions]="{ exact: true }"

Then your home route will only be active if you're on the exact route. The home route with an empty path will be a partial match on all routes

edited Feb 6, 2020 at 18:07

answered Aug 3, 2016 at 14:51

Peter Lorei

6346 silver badges6 bronze badges

Comments

Adrian Mole · Accepted Answer · 2022-06-23 11:57:57Z

2

You can do something like this:

<button routerLink="/" [routerLinkActiveOptions]="{ exact: true }" routerLinkActive="nav-button-active"
                mat-button mat-raised-button
                class="w-100 mb-3 nav-buttons">
          Dashboard
</button>

Just make rure to add the property, [routerLinkActiveOptions]="{ exact: true }".

edited Jun 23, 2022 at 11:57

Adrian Mole

52.1k193 gold badges61 silver badges101 bronze badges

answered Jun 22, 2022 at 21:13

Mohamed Eldefrawy

742 bronze badges

Comments

Ala A. · Accepted Answer · 2025-01-26 15:00:52Z

0

As mentioned, use [routerLinkActiveOptions]="{ exact: true }"

If inside a for loop, you can do this

@for (route of navRoutes; track route.path) {
        <a mat-list-item
           [routerLink]="route.path"
           routerLinkActive
           [routerLinkActiveOptions]="{ exact: route.path === '/' }">
          <!--for styling, only if using Angular Material -->
          <!--#rla="routerLinkActive" [activated]="rla.isActive">-->
          {{ route.label }}
        </a>
}

answered Jan 26 at 15:00

Ala A.

2,34526 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular 2 routerLinkActive always active for base path

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related