routerLinkActive for multiple routes

Question

I want to apply 'active' class to my header nav bar. it is working well with the standard [routerLinkActive] but there is one issue. some of the <li> elements has two situations which makes them active.

I have [/something/inboxes] and [/something/details/:Id] and i want the something tab to be active for these two routes

this is my code:

  <li [routerLinkActive]="['active']">
    <a [routerLink]="['/something/inboxes']">something</a>
  </li>

Note that the inboxes and details are completely different components.

My question is, is there any better and easier way than using [ngClass]

Change the route definition from /something/inboxes to /something. Or add a route /something that redirects to /something/inboxes. — JB Nizet, Jul 22 '18 at 13:28

leksinteractive · Answer 1 · 2018-07-22T13:54:12.453

0

I think this answer might help: Angular4 - Is routerLinkActive only works on the same html tag?

edited Jul 22 '18 at 13:54

answered Jul 22 '18 at 13:38

leksinteractive

73
9

the default [routerLinkActiveOptions] exact is always false. – Ibrahim Doqa Jul 22 '18 at 13:56

score 0 · Answer 2 · answered Jul 22 '18 at 17:37

I had a similar problem. I wanted link to be active for all child routes. I resolved it like this: HTML:

<a class="{YOUR CLASS}" routerLink="/{my link}/test" [class.selected]="isActive('{my link}')"><a>

If you have a different class for link active use [class.my-active-link-class]

TS:

 public isActive(url): boolean {
      return this.router.url.includes(url);
    }

You can extend your isActive method to accept array of urls.

routerLinkActive for multiple routes

2 Answers2