In Angular, how do you determine the active route?

Question

NOTE: There are many different answers here, and most have been valid at one time or another. The fact is that what works has changed a number of times as the Angular team has changed its Router. The Router 3.0 version that will eventually be the router in Angular breaks many of these solutions, but offers a very simple solution of its own. As of RC.3, the preferred solution is to use [routerLinkActive] as shown in this answer.

In an Angular application (current in the 2.0.0-beta.0 release as I write this), how do you determine what the currently active route is?

I'm working on an app that uses Bootstrap 4 and I need a way to mark navigation links/buttons as active when their associated component is being shown in a <router-output> tag.

I realize that I could maintain the state myself when one of the buttons is clicked upon, but that wouldn't cover the case of having multiple paths into the same route (say a main navigation menu as well as a local menu in the main component).

Any suggestions or links would be appreciated. Thanks.

score 478 · Accepted Answer · edited Aug 13 '19 at 23:00

478

With the new Angular router, you can add a [routerLinkActive]="['your-class-name']" attribute to all your links:

<a [routerLink]="['/home']" [routerLinkActive]="['is-active']">Home</a>

Or the simplified non-array format if only one class is needed:

<a [routerLink]="['/home']" [routerLinkActive]="'is-active'">Home</a>

Or an even simpler format if only one class is needed:

<a [routerLink]="['/home']" routerLinkActive="is-active">Home</a>

See the poorly documented routerLinkActive directive for more info. (I mostly figured this out via trial-and-error.)

UPDATE: Better documentation for the routerLinkActive directive can now be found here. (Thanks to @Victor Hugo Arango A. in the comments below.)

edited Aug 13 '19 at 23:00

random_user_name

25,694
7
76
115

answered Jun 21 '16 at 14:38

jessepinho

5,580
1
19
19

Please note, that you need to add the above directive to all your links. Then `is-active` will be added as a class to the active link only. – Val Neekman Jun 25 '16 at 16:11
7

Is there any way for it to activate when the route's children are active? The code has an `@input` for options, but `exact: false` activates the class whenever the current route's siblings are also active. – Matej Jun 26 '16 at 10:45
@jessepinho Can you use this from router.navigate() ? If not, how can you use it with a router.navigate() ? – Gab Jun 30 '16 at 15:56
1

@GabrieleB-David I haven't tested it, but I would assume that `router.navigate()` would work just fine. `routerLinkActive` is simply an indicator of whether this link represents the active route. – jessepinho Jul 07 '16 at 10:27
11
In the given example, [routerLinkActive] is added to the tag, however, it can also be put on other elements if the class is required elsewhere.
– Oblivion2000 Jul 20 '16 at 12:16
That's why I need a location name! ) – DenisKolodin Jul 22 '16 at 07:53
3

@jessepinho - Tried it - [routerLinkActive]="'active'" will only work if you also have [routerLink] in the a-tag. If you had (click)="navitageTo('/route')" instead of [routerLink], and in that function, you called this.router.navigate(route), the new component will load but your active CSS class won't be applied. I'm trying do something else in that function besides this.router.navigate(..). – Mickael Caruso Jul 24 '16 at 02:26
This also can work routerLinkActive="active", just don't forget to use routerLink="/some_link" , i.e
link

user3728728

Dec 24 '16 at 10:41

@codeninja if the child route contains the parent route exactly then active class is applied to the parent. e.g going to 'articles/1' results in 'articles' link being active in my case. – S.. Jan 09 '17 at 09:51

4

The example in the official documentation could help you: https://angular.io/docs/ts/latest/api/router/index/RouterLinkActive-directive.html – Victor Hugo Arango A. Jan 15 '17 at 11:55

[routerLinkActiveOptions]="{exact: true}" – AzizStark Jul 28 '20 at 15:45

score 79 · Answer 2 · edited May 23 '17 at 11:47

79

I've replied this in another question but I believe it might be relevant to this one as well. Here's a link to the original answer: Angular 2: How to determine active route with parameters?

I've been trying to set the active class without having to know exactly what's the current location (using the route name). The is the best solution I have got to so far is using the function isRouteActive available in the Router class.

router.isRouteActive(instruction): Boolean takes one parameter which is a route Instruction object and returns true or false whether that instruction holds true or not for the current route. You can generate a route Instruction by using Router's generate(linkParams: Array). LinkParams follows the exact same format as a value passed into a routerLink directive (e.g. router.isRouteActive(router.generate(['/User', { user: user.id }])) ).

This is how the RouteConfig could look like (I've tweaked it a bit to show the usage of params):

@RouteConfig([
  { path: '/', component: HomePage, name: 'Home' },
  { path: '/signin', component: SignInPage, name: 'SignIn' },
  { path: '/profile/:username/feed', component: FeedPage, name: 'ProfileFeed' },
])

And the View would look like this:

<li [class.active]="router.isRouteActive(router.generate(['/Home']))">
   <a [routerLink]="['/Home']">Home</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/SignIn']))">
   <a [routerLink]="['/SignIn']">Sign In</a>
</li>
<li [class.active]="router.isRouteActive(router.generate(['/ProfileFeed', { username: user.username }]))">
    <a [routerLink]="['/ProfileFeed', { username: user.username }]">Feed</a>
</li>

This has been my preferred solution for the problem so far, it might be helpful for you as well.

edited May 23 '17 at 11:47

Community

1
1

answered Jan 02 '16 at 23:56

Alex Santos

2,900
1
19
21

1

I think this solution is better than the accepted one since it uses Angular API's instead of regex matching the path. It still is a bit ugly though, it would nice to just be able to do `router.isRouteActive('Home')`. – Philip Jan 07 '16 at 22:55
@Philip I agree with you, it's a nice way to decouple it from the actual path, but it's not as pretty as I'd expect as well. I guess you could write a wrapper around it and make it much smaller which would improve readability. – Alex Santos Jan 07 '16 at 23:09
2

I faced some issues upon trying to implement the solution, so maybe for some can be useful: http://stackoverflow.com/questions/35882998/angular-2-typeerror-cannot-read-property-isrouteactive-of-undefined-in/35883070#35883070 – Nikita Vlasenko Mar 09 '16 at 04:54
5

should not forget to put `Router` in class's constructor – Nikita Vlasenko Mar 09 '16 at 04:55
2

In the latest Angular 2 version I used `name` instead of `as` in the router configuration object. – ComFreek Mar 24 '16 at 09:54
1

in Angular2 RC, `Router` no longer has methods `isRouteActive` and `generate`. – tchelidze May 15 '16 at 07:24
9

This can be used in rc1 instead: `router.urlTree.contains(router.createUrlTree(['Home']))` – František Žiačik May 15 '16 at 11:23
@FrantišekŽiačik does `contains` checks whether `treeB` is [subtree](https://proofwiki.org/wiki/Definition:Subtree_(Graph_Theory)) of `treeB` ? – tchelidze May 16 '16 at 05:36
@tchelidze no, it doesn't, however if you inject RouteSegment too, you can generate full path like this `router.createUrlTree(['Home'], this.routeSegment)`. Also, please note this anwer based on Günter Zöchbauer's http://stackoverflow.com/questions/36537878/changing-the-default-name-of-router-link-active-class-by-writing-a-custom-dire/37238132#37238132 in which there is a another way to do this without poluting your template – František Žiačik May 16 '16 at 07:58
@FrantišekŽiačik `router.urlTree` is not same as `router.createUrlTree(['Home'], this.routeSegment)`, or what's diff ? – tchelidze May 16 '16 at 08:02
@tchelidze Can you pls rephrase the question, I don't follow what you're asking. To clarify, if you do this (I didn't try this though), `router.urlTree.contains(router.createUrlTree(['Home', this.routeSegment]))`, it should work when Home is a not a root path, eg /parent-route/home. – František Žiačik May 16 '16 at 08:06
@FrantišekŽiačik In linked answer, you keep track of `currentUrl` manually via ` this.currentUrl = this.router.createUrlTree(this.routerLink, this.routeSegment);`. Question is, why is this necessary ? would not `this.currentUrl` be same as `router.urlTree`. – tchelidze May 16 '16 at 08:20
1

@tchelidze Oh right, I didn't actually answer your original question. It is necessary because `currentUrl` is not a complete path when `routeSegment` is not used while `urlTree`, apparently, is, and `contains` doesn't check if the `currentUrl` is a subtree of `urlTree` (though I would expect the opposite looking at the method name). Didn't see the implementation of `contains` though, so it's just my guess. Also, if you check how `RouterLink` is implemented, it does exactly like that (actually it's extracted from there). – František Žiačik May 16 '16 at 08:26
why @RouteConfig is not present in release candidate version – Ravinder Payal May 17 '16 at 10:41

tomaszbak · Answer 3 · 2016-06-07T20:52:37.480

41

Small improvement to @alex-correia-santos answer based on https://github.com/angular/angular/pull/6407#issuecomment-190179875

import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
// ...
export class App {
  constructor(private router: Router) {
  }

  // ...

  isActive(instruction: any[]): boolean {
    return this.router.isRouteActive(this.router.generate(instruction));
  }
}

And use it like this:

<ul class="nav navbar-nav">
    <li [class.active]="isActive(['Home'])">
        <a [routerLink]="['Home']">Home</a>
    </li>
    <li [class.active]="isActive(['About'])">
        <a [routerLink]="['About']">About</a>
    </li>
</ul>

edited Jun 07 '16 at 20:52

answered Mar 04 '16 at 17:24

tomaszbak

8,247
4
44
37

and a style in the component `styles : [`.active { background-color: aliceblue; }`]`. +1 it works – Pratik Kelwalkar Apr 15 '16 at 10:41
Great solution, with this you can make the router private. – Kelvin Dealca Jun 06 '16 at 19:46
This is a much better solution and is especially useful for a noob who forgets little things like creating the constructor and passing in the router! You totally deserve the check. – Methodician Jun 09 '16 at 20:35
1

These methods are not present in angular 8 – Saurabh Gangamwar Dec 05 '21 at 06:00
1

`isRouteActive` and `generate` does not exists on `Router` – Christopher Smit Feb 17 '22 at 08:23

score 37 · Answer 4 · edited May 23 '17 at 12:18

37

I solved a problem I encountered in this link and I find out that there is a simple solution for your question. You could use router-link-active instead in your styles.

@Component({
   styles: [`.router-link-active { background-color: red; }`]
})
export class NavComponent {
}

edited May 23 '17 at 12:18

Community

1
1

answered Jan 16 '16 at 05:49

Quy Tang

3,929
1
31
45

2

I believe this should be the accepted answer. Angular2's router will add this automatically for you. – Gabu Feb 16 '16 at 02:39
2

unfortunately, that class add on , not on

laifjei

Mar 01 '16 at 09:57

unfortunately it doesn't really work nicely. i have one dynamically generated menu and `router-link-active` class is not being added to the active `a` or `li`. but there is one place i'm using bootstrap `nav-tabs` and it works there. – Shri Apr 09 '16 at 16:29

score 32 · Answer 5 · edited Jan 05 '16 at 02:55

You can check the current route by injecting the Location object into your controller and checking the path(), like so:

class MyController {
    constructor(private location:Location) {}

    ...  location.path(); ...
}

You will have to make sure to import it first:

import {Location} from "angular2/router";

You can then use a regular expression to match against the path that's returned to see which route is active. Note that the Location class returns a normalized path regardless of which LocationStrategy you're using. So even if you're using the HashLocationStragegy the paths returned will still be of the form /foo/bar not #/foo/bar

score 23 · Answer 6 · edited May 23 '17 at 11:55

To mark active routes routerLinkActive can be used

<a [routerLink]="/user" routerLinkActive="some class list">User</a>

This also works on other elements like

<div routerLinkActive="some class list">
  <a [routerLink]="/user">User</a>
</div>

If partial matches should also be marked use

routerLinkActive="some class list" [routerLinkActiveOptions]="{ exact: false }"

As far as I know exact: false is going to be the default in RC.4

Ankit Singh · Answer 7 · 2016-12-27T10:09:21.310

19

how do you determine what the currently active route is?

UPDATE: updated as per Angular2.4.x

constructor(route: ActivatedRoute) {
   route.snapshot.params; // active route's params

   route.snapshot.data; // active route's resolved data

   route.snapshot.component; // active route's component

   route.snapshot.queryParams // The query parameters shared by all the routes
}

see more...

edited Dec 27 '16 at 10:09

answered Apr 23 '16 at 06:44

Ankit Singh

24,525
11
66
89

score 17 · Answer 8 · answered Jun 30 '19 at 05:07

17

As of Angular 8, this works:

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
    <a [routerLink]="['/']">Home</a>
</li>

{ exact: true } ensures it matches the url.

answered Jun 30 '19 at 05:07

codejockie

9,020
4
40
46

1

You really saved my time. I am looking for this only... Thanks a lot! I am using ng-bootstrap:6.2.X and Angular: 9.1.14 – Tejashree Feb 17 '21 at 06:31

score 16 · Answer 9 · answered Feb 21 '18 at 10:03

16

Just thought I would add in an example which doesn't use any typescript:

<input type="hidden" [routerLink]="'home'" routerLinkActive #home="routerLinkActive" />
<section *ngIf="home.isActive"></section>

The routerLinkActive variable is bound to a template variable and then re-used as required. Unfortunately the only caveat is that you can't have this all on the <section> element as #home needs to be resolved prior to the parser hitting <section>.

answered Feb 21 '18 at 10:03

Zze

18,229
13
85
118

1

Perfect solution for applying conditions on active routes.Where @angular/router or else didn't worked. – Rohit Parte May 03 '19 at 18:29
1

Wow, this is so helpful. Thanks! – Yulian Jan 17 '20 at 12:11
Thanks this works, for those wondering like me you need to have a variable in your .ts file defined like: home: RouterLinkActive – Dylan Moguilevsky Jan 02 '23 at 18:19

Igor Kurkov · Answer 10 · 2020-01-29T22:33:03.290

16

in 2020 if you want to set active class on element which has no [routerLink] - you can do simply:

<a
  (click)="bookmarks()"
  [class.active]="router.isActive('/string/path/'+you+'/need', false)" // <== you need this one. second argument 'false' - exact: true/false
  routerLinkActive="active"
  [routerLinkActiveOptions]="{ exact: true }"
>
  bookmarks
</a>

edited Jan 29 '20 at 22:33

answered Jan 25 '20 at 22:12

Igor Kurkov

4,318
2
30
31

Perfect! This is also beneficial for Angular Universal where we can't use routerLink because we're using hrefs – Andrew Howard Nov 14 '22 at 22:43

score 14 · Answer 11 · answered Aug 10 '16 at 12:28

14

Right now i'm using rc.4 with bootstrap 4 and this one works perfect for me:

 <li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact:
true}">
    <a class="nav-link" [routerLink]="['']">Home</a>
</li>

This will work for url : /home

answered Aug 10 '16 at 12:28

Artem Zinoviev

869
12
32

What is the purpose of the exact option? Does that make it not match sub-paths like `/home/whatever`? – Michael Oryl Aug 11 '16 at 09:44
yes, `exact` mean, that route will have same name. And this is required if you plan use it with tools like twitter bootstrap. It already handle active link state and without `exact` option will not working. (not sure about how does it work in core, i was try it and it working for me) – Artem Zinoviev Aug 11 '16 at 14:00

score 10 · Answer 12 · answered Jan 01 '21 at 18:31

10

This helped me for active/inactive routes:

<a routerLink="/user/bob" routerLinkActive #rla="routerLinkActive" [ngClass]="rla.isActive ? 'classIfActive' : 'classIfNotActive'">
</a>

Ref

answered Jan 01 '21 at 18:31

Mohammad Zaid Pathan

16,304
7
99
130

routerLinkActive="classIfActive" should suffice – Martin Cremer Feb 15 '23 at 11:42

score 8 · Answer 13 · answered Apr 15 '16 at 09:07

Below is the method using RouteData to style menuBar items depending of the current route:

RouteConfig includes data with tab (current route):

@RouteConfig([
  {
    path: '/home',    name: 'Home',    component: HomeComponent,
    data: {activeTab: 'home'},  useAsDefault: true
  }, {
    path: '/jobs',    name: 'Jobs',    data: {activeTab: 'jobs'},
    component: JobsComponent
  }
])

A piece of layout:

  <li role="presentation" [ngClass]="{active: isActive('home')}">
    <a [routerLink]="['Home']">Home</a>
  </li>
  <li role="presentation" [ngClass]="{active: isActive('jobs')}">
    <a [routerLink]="['Jobs']">Jobs</a>
  </li>

Class:

export class MainMenuComponent {
  router: Router;

  constructor(data: Router) {
    this.router = data;
  }

  isActive(tab): boolean {
    if (this.router.currentInstruction && this.router.currentInstruction.component.routeData) {
      return tab == this.router.currentInstruction.component.routeData.data['activeTab'];
    }
    return false;
  }
}

score 6 · Answer 14 · edited Jun 20 '20 at 09:12

Router in Angular 2 RC no longer defines isRouteActive and generate methods.

urlTree - Returns the current url tree.

createUrlTree(commands: any[], segment?: RouteSegment) - Applies an array of commands to the current url tree and creates a new url tree.

Try following

<li 
[class.active]=
"router.urlTree.contains(router.createUrlTree(['/SignIn', this.routeSegment]))">

notice, routeSegment : RouteSegment must be injected into component's constructor.

score 6 · Answer 15 · answered Jun 11 '16 at 17:21

Here's a complete example for adding active route styling in Angular version 2.0.0-rc.1 which takes into account null root paths (e.g. path: '/')

app.component.ts -> Routes

import { Component, OnInit } from '@angular/core';
import { Routes, Router, ROUTER_DIRECTIVES } from '@angular/router';
import { LoginPage, AddCandidatePage } from './export';
import {UserService} from './SERVICES/user.service';

@Component({
  moduleId: 'app/',
  selector: 'my-app',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [UserService],
  directives: [ROUTER_DIRECTIVES]
})

@Routes([
  { path: '/', component: AddCandidatePage },
  { path: 'Login', component: LoginPage }
])
export class AppComponent  { //implements OnInit

  constructor(private router: Router){}

  routeIsActive(routePath: string) {
     let currentRoute = this.router.urlTree.firstChild(this.router.urlTree.root);
     // e.g. 'Login' or null if route is '/'
     let segment = currentRoute == null ? '/' : currentRoute.segment;
     return  segment == routePath;
  }
}

app.component.html

<ul>
  <li [class.active]="routeIsActive('Login')"><a [routerLink]="['Login']" >Login</a></li>
  <li [class.active]="routeIsActive('/')"><a [routerLink]="['/']" >AddCandidate</a></li>
</ul>
<route-outlet></router-outlet>

score 6 · Answer 16 · answered Jul 12 '16 at 12:09

Solution for Angular2 RC 4:

import {containsTree} from '@angular/router/src/url_tree';
import {Router} from '@angular/router';

export function isRouteActive(router: Router, route: string) {
   const currentUrlTree = router.parseUrl(router.url);
   const routeUrlTree = router.createUrlTree([route]);
   return containsTree(currentUrlTree, routeUrlTree, true);
}

score 5 · Answer 17 · answered Jul 19 '19 at 09:18

And in the latest version of angular, you can simply do check router.isActive(routeNameAsString). For example see the example below:

 <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item" [class.active] = "router.isActive('/dashboard')">
        <a class="nav-link" href="#">داشبورد <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item" [class.active] = "router.isActive(route.path)" *ngFor="let route of (routes$ | async)">
        <a class="nav-link" href="javascript:void(0)" *ngIf="route.childRoutes && route.childRoutes.length > 0"
          [matMenuTriggerFor]="menu">{{route.name}}</a>
        <a class="nav-link" href="{{route.path}}"
          *ngIf="!route.childRoutes || route.childRoutes.length === 0">{{route.name}}</a>
        <mat-menu #menu="matMenu">
          <span *ngIf="route.childRoutes && route.childRoutes.length > 0">
            <a *ngFor="let child of route.childRoutes" class="nav-link" href="{{route.path + child.path}}"
              mat-menu-item>{{child.name}}</a>
          </span>
        </mat-menu>
      </li>
    </ul>
    <span class="navbar-text mr-auto">
      <small>سلام</small> {{ (currentUser$ | async) ? (currentUser$ | async).firstName : 'کاربر' }}
      {{ (currentUser$ | async) ? (currentUser$ | async).lastName : 'میهمان' }}
    </span>
  </div>

And make sure you are not forgetting injecting router in your component.

pleerock · Answer 18 · 2016-07-16T18:42:04.673

Using routerLinkActive is good in simple cases, when there is a link and you want to apply some classes. But in more complex cases where you may not have a routerLink or where you need something more you can create and use a pipe:

@Pipe({
    name: "isRouteActive",
    pure: false
})
export class IsRouteActivePipe implements PipeTransform {

    constructor(private router: Router,
                private activatedRoute: ActivatedRoute) {
    }

    transform(route: any[], options?: { queryParams?: any[], fragment?: any, exact?: boolean }) {
        if (!options) options = {};
        if (options.exact === undefined) options.exact = true;

        const currentUrlTree = this.router.parseUrl(this.router.url);
        const urlTree = this.router.createUrlTree(route, {
            relativeTo: this.activatedRoute,
            queryParams: options.queryParams,
            fragment: options.fragment
        });
        return containsTree(currentUrlTree, urlTree, options.exact);
    }
}

then:

<div *ngIf="['/some-route'] | isRouteActive">...</div>

and don't forget to include pipe in the pipes dependencies ;)

Nice idea but in angular2.0.0rc3 i change this.router.isRouteActive... to this._location.path() and put on top this: import { Location } from '@angular/common'; — Kamil Kiełczewski, Jun 30 '16 at 20:16
There seems to be missing something from the code. Where is `containsTree` defined? — Øystein Amundsen, Nov 03 '16 at 08:14

score 4 · Answer 19 · answered Jun 25 '16 at 11:17

4

Another Workaround. Much easier in Angular Router V3 Alpha. by injecting Router

import {Router} from "@angular/router";

export class AppComponent{

    constructor(private router : Router){}

    routeIsActive(routePath: string) {
        return this.router.url == routePath;
    }
}

usage

<div *ngIf="routeIsActive('/')"> My content </div>

answered Jun 25 '16 at 11:17

shakee93

4,976
2
28
32

as soon as I import it I get an Cannot read property 'isSkipSelf' of null error. any ideas? – atsituab Jun 25 '16 at 16:45

score 4 · Answer 20 · answered Jul 10 '16 at 09:44

4

In Angular2 RC2 you can use this simple implementation

<a [routerLink]="['/dashboard']" routerLinkActive="active">Dashboard</a>

this will add class active to the element with matched url, read more about it here

answered Jul 10 '16 at 09:44

Khaled Al-Ansari

3,910
2
24
27

score 4 · Answer 21 · answered Jul 15 '16 at 10:15

Below are the answers to this question for all the versions of Angular 2 RC versions released till date:

RC4 and RC3 :

For applying class to link or ancestor of link :

<li routerLinkActive="active"><a [routerLink]="['/home']">Home</a></li>

/home should be the URL and not the name of route since name property no longer exists on Route Object as of Router v3.

More about routerLinkActive directive at this link.

For applying class to any div based on current route :

Inject Router into constructor of component.
User router.url for comparison.

e.g

<nav [class.transparent]="router.url==('/home')">
</nav>

RC2 and RC1:

Use combination of router.isRouteActive and class.*. e.g to apply active class based on Home Route.

Name and url can both be passed into router.generate.

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

score 4 · Answer 22 · edited Oct 12 '17 at 17:26

For Angular version 4+, you don't need to use any complex solution. You can simply use [routerLinkActive]="'is-active'".

For an example with bootstrap 4 nav link:

    <ul class="navbar-nav mr-auto">
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/home">Home</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link" routerLink="/about-us">About Us</a>
      </li>
      <li class="nav-item" routerLinkActive="active">
        <a class="nav-link " routerLink="/contact-us">Contact</a>
      </li>
    </ul>

score 3 · Answer 23 · answered May 15 '16 at 17:50

An instance of the Router class is actually an Observable and it returns the current path everytime it changes. This is how I do it :

export class AppComponent implements OnInit { 

currentUrl : string;

constructor(private _router : Router){
    this.currentUrl = ''
}

ngOnInit() {
    this._router.subscribe(
        currentUrl => this.currentUrl = currentUrl,
        error => console.log(error)
    );
}

isCurrentRoute(route : string) : boolean {
    return this.currentUrl === route;
 } 
}

And then in my HTML :

<a [routerLink]="['Contact']" class="item" [class.active]="isCurrentRoute('contact')">Contact</a>

.subscribe not available on Router instance. – Shivang Gupta Nov 26 '16 at 14:59 — Shivang Gupta, Nov 26 '16 at 14:59

score 3 · Answer 24 · answered Nov 03 '16 at 15:24

As mentioned in one of the comments of the accepted answer, the routerLinkActive directive can also be applied to a container of the actual <a> tag.

So for example with Twitter Bootstrap tabs where the active class should be applied to the <li> tag that contains the link :

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./location">Location</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a routerLink="./execution">Execution</a>
    </li>
</ul>

Pretty neat ! I suppose the directive inspects the content of the tag and looks for an <a> tag with the routerLink directive.

score 2 · Answer 25 · answered Apr 17 '18 at 10:19

Simple solution for angular 5 users is, just add routerLinkActive to the list item.

A routerLinkActive directive is associated with a route through a routerLink directive.

It takes as input an array of classes which it will add to the element it’s attached to if it’s route is currently active, like so:

<li class="nav-item"
    [routerLinkActive]="['active']">
  <a class="nav-link"
     [routerLink]="['home']">Home
  </a>
</li>

The above will add a class of active to the anchor tag if we are currently viewing the home route.

Ben Thielker · Answer 26 · 2016-04-13T18:25:40.093

I was seeking a way to use a Twitter Bootstrap style nav with Angular2, but had trouble getting the active class applied to the parent element of the selected link. Found that @alex-correia-santos's solution works perfectly!

The component containing your tabs has to import the router and define it in its constructor before you can make the necessary calls.

Here's a simplified version of my implementation...

import {Component} from 'angular2/core';
import {Router, RouteConfig, ROUTER_DIRECTIVES} from 'angular2/router';
import {HomeComponent} from './home.component';
import {LoginComponent} from './login.component';
import {FeedComponent} from './feed.component';

@Component({
  selector: 'my-app',
  template: `
    <ul class="nav nav-tabs">
      <li [class.active]="_r.isRouteActive(_r.generate(['Home']))">
        <a [routerLink]="['Home']">Home</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Login']))">
        <a [routerLink]="['Login']">Sign In</a>
      </li>
      <li [class.active]="_r.isRouteActive(_r.generate(['Feed']))">
        <a [routerLink]="['Feed']">Feed</a>
      </li>
    </ul>`,
  styleUrls: ['app/app.component.css'],
  directives: [ROUTER_DIRECTIVES]
})
@RouteConfig([
  { path:'/', component:HomeComponent, name:'Home', useAsDefault:true },
  { path:'/login', component:LoginComponent, name:'Login' },
  { path:'/feed', component:FeedComponent, name:'Feed' }
])
export class AppComponent {
  title = 'My App';
  constructor( private _r:Router ){}
}

score 1 · Answer 27 · answered Jun 12 '17 at 13:52

let's say you want to add CSS to my active state/tab. Use routerLinkActive to activate your routing link.

note : 'active' is my class name here

<style>
   .active{
       color:blue;
     }
</style>

  <a routerLink="/home" [routerLinkActive]="['active']">Home</a>
  <a routerLink="/about" [routerLinkActive]="['active']">About</a>
  <a routerLink="/contact" [routerLinkActive]="['active']">Contact</a>

score 1 · Answer 28 · edited Apr 08 '20 at 08:41

A programatic way would be to do it in the component itself. I struggled three weeks on this issue, but gave up on angular docs and read the actual code that made routerlinkactive work and Thats about the best docs I can find.

    import {
  Component,AfterContentInit,OnDestroy, ViewChild,OnInit, ViewChildren, AfterViewInit, ElementRef, Renderer2, QueryList,NgZone,ApplicationRef
}
  from '@angular/core';
  import { Location } from '@angular/common';

import { Subscription } from 'rxjs';
import {
  ActivatedRoute,ResolveStart,Event, Router,RouterEvent, NavigationEnd, UrlSegment
} from '@angular/router';
import { Observable } from "rxjs";
import * as $ from 'jquery';
import { pairwise, map } from 'rxjs/operators';
import { filter } from 'rxjs/operators';
import {PageHandleService} from '../pageHandling.service'
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})




export class HeaderComponent implements AfterContentInit,AfterViewInit,OnInit,OnDestroy{

    public previousUrl: any;
    private subscription: Subscription;


      @ViewChild("superclass", { static: false } as any) superclass: ElementRef;
      @ViewChildren("megaclass") megaclass: QueryList<ElementRef>;


  constructor( private element: ElementRef, private renderer: Renderer2, private router: Router, private activatedRoute: ActivatedRoute, private location: Location, private pageHandleService: PageHandleService){
    this.subscription = router.events.subscribe((s: Event) => {
      if (s instanceof NavigationEnd) {
        this.update();
      }
    });


  }


  ngOnInit(){

  }


  ngAfterViewInit() {
  }

  ngAfterContentInit(){
  }



private update(): void {
  if (!this.router.navigated || !this.superclass) return;
      Promise.resolve().then(() => {
        this.previousUrl = this.router.url

        this.megaclass.toArray().forEach( (superclass) => {

          var superclass = superclass
          console.log( superclass.nativeElement.children[0].classList )
          console.log( superclass.nativeElement.children )

          if (this.previousUrl == superclass.nativeElement.getAttribute("routerLink")) {
            this.renderer.addClass(superclass.nativeElement.children[0], "box")
            console.log("add class")

          } else {
            this.renderer.removeClass(superclass.nativeElement.children[0], "box")
            console.log("remove class")
          }

        });
})
//update is done
}
ngOnDestroy(): void { this.subscription.unsubscribe(); }


//class is done
}

Note:
For the programatic way, make sure to add the router-link and it takes a child element. If you want to change that, you need to get rid of the children on superclass.nativeElement.

score 0 · Answer 29 · answered Feb 16 '17 at 20:13

I'm using angular router ^3.4.7 and I'm still having problems with the routerLinkActive directive.

It's not working if you have multiple link with the same url plus it does not seem to refresh all the time.

Inspired by @tomaszbak answer I created a little component to do the job

score 0 · Answer 30 · answered Jun 22 '18 at 13:05

0

Pure html template be like

 <a [routerLink]="['/home']" routerLinkActive="active">Home</a>
 <a [routerLink]="['/about']" routerLinkActive="active">About us</a>
 <a [routerLink]="['/contact']" routerLinkActive="active">Contacts</a>

answered Jun 22 '18 at 13:05

Bellash

7,560
6
53
86

score 0 · Answer 31 · answered Oct 15 '18 at 06:24

start with importing RouterLinkActive in your .ts

import { RouterLinkActive } from '@angular/router';

Now use RouterLinkActive in your HTML

<span class="" routerLink ="/some_path" routerLinkActive="class_Name">Value</span></a>

provide some css to class "class_Name" , as when this link will be active/clicked you will find this class on span while inspection.

In Angular, how do you determine the active route?

31 Answers31

Linked