Using isRouteActive for determining if the route is active

Question

I am trying to use isRouteActive for determining if the particular route is active or not, but getting error, angular2.dev.js:23730 TypeError: l_context.isRouteActive is not a function

<li [class.active]="isRouteActive(router.generate(['/Users']))"><a [routerLink]="['Users']">Users </a></li>

I have gone through the documentation, & surprised why there are two different documents for Router class.

https://angular.io/docs/ts/latest/api/router/index/Router-class.html https://angular.io/docs/ts/latest/api/router/Router-class.html

I am using 2.0.0-beta.12 version of Angular2.

It seems isRouteActive is not available in 2.0.0-beta.12. But I am unable to figure out how to achieve the same.

I am using it for highlighting the link with active class for current route
Please edit the question and add the code there. Code in comments is hard to read. Do you inject the `Router` how does your `isRouteActive()` method look like? — Günter Zöchbauer, May 04 '16 at 04:00
Thank you for your response Günter Zöchbauer. It reminded me about the typo in my code. I have answered my question for the future reference. Thank You again. — Rahul Bhooteshwar, May 04 '16 at 04:22

score 3 · Answer 1 · answered May 04 '16 at 04:18

3

Ohkey, got it.

It was a typo in calling isRouteActive. I should have called it using router.isRouteActive.

So for using it,correctly

in template:

<li [class.active] = "router.isRouteActive(router.generate(['/Users']))">

Users

in component:

constructor(public router: Router){

}

answered May 04 '16 at 04:18

Rahul Bhooteshwar

1,675
17
31

2

As a best practice, we can make router a private variable and expose it using a method in class. – Rahul Bhooteshwar May 04 '16 at 04:26

score 3 · Answer 2 · edited Aug 23 '19 at 12:54

3

Using angular 4+ router.isRouteActive was not working for me, instead used router.isActive which is listed in the docs as an official method did the trick. Main advantage to using this vs routerLinkActive property binding is that its helpful when you dont want to present a link in ui, only show some sort step indicator.

https://angular.io/api/router/Router#isActive

<li [class.active]="router.isActive('/my/routing/path')" ></li>

edited Aug 23 '19 at 12:54

Dinesh Gehlot

38
6

answered Jul 21 '17 at 17:31

Dan

194
1
9

there is also second parameter `exact: boolean` – Mher Apr 20 '18 at 16:28

score 1 · Answer 3 · edited May 23 '17 at 12:34

1

This does the trick (using RC5)

<li [class.active]="homeLink.classList.contains('active')">
    <a #homeLink routerLink="/home" routerLinkActive="active">Home</a>
</li>

Duplicate of https://stackoverflow.com/a/39146324/1448419

edited May 23 '17 at 12:34

Community

1
1

answered Aug 25 '16 at 13:14

rcomblen

4,579
1
27
32

Using isRouteActive for determining if the route is active

3 Answers3