CODEWITHSUNDEEP
angularangular2-routing
Rahul Bhooteshwar
Rahul Bhooteshwar

Reputation: 1955

Using isRouteActive for determining if the route is active

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.

Upvotes: 4

Views: 7438

Answers (3)

Dan
Dan

Reputation: 194

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>

Upvotes: 3

rcomblen
rcomblen

Reputation: 4649

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

Upvotes: 1

Rahul Bhooteshwar
Rahul Bhooteshwar

Reputation: 1955

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){

}

Upvotes: 3

Related Questions