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  lt router-output gt  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

User · Accepted Answer

With the new Angular router  you can add a  routerLinkActive     your-class-name    attribute to all your links    lt a  routerLink      home     routerLinkActive     is-active    gt Home lt  a gt    Or the simplified non-array format if only one class is needed    lt a  routerLink      home     routerLinkActive    is-active   gt Home lt  a gt    Or an even simpler format if only one class is needed    lt a  routerLink      home    routerLinkActive  is-active  gt Home lt  a gt    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

User · Answer

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  lt li   class active    quot router urlTree contains router createUrlTree    SignIn   this routeSegment    quot  gt   notice  routeSegment   RouteSegment must be injected into component s constructor

User · Answer

Pure html template be like    lt a  routerLink      home    routerLinkActive  active  gt Home lt  a gt    lt a  routerLink      about    routerLinkActive  active  gt About us lt  a gt    lt a  routerLink      contact    routerLinkActive  active  gt Contacts lt  a gt

User · Answer

Just thought I would add in an example which doesn t use any typescript    lt input type  hidden   routerLink    home   routerLinkActive  home  routerLinkActive    gt   lt section  ngIf  home isActive  gt  lt  section gt    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  lt section gt  element as  home needs to be resolved prior to the parser hitting  lt section gt

User · Answer

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   lt ul gt     lt li  class active   routeIsActive  Login    gt  lt a  routerLink     Login     gt Login lt  a gt  lt  li gt     lt li  class active   routeIsActive       gt  lt a  routerLink           gt AddCandidate lt  a gt  lt  li gt   lt  ul gt   lt route-outlet gt  lt  router-outlet gt

User · Answer

in 2020 if you want to set active class on element which has no  routerLink  - you can do simply    lt a    click   bookmarks       class active   router isActive   string path   you   need   false       lt    you need this one  second argument  false  - exact  true false   routerLinkActive  active     routerLinkActiveOptions     exact  true     gt    bookmarks  lt  a gt

User · Answer

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      lt li routerLinkActive  active  gt  lt a  routerLink      home    gt Home lt  a gt  lt  li gt     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   lt nav  class transparent   router url     home    gt   lt  nav gt    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     lt li  class active   router isRouteActive router generate   Home      gt       lt a  routerLink     Home     gt Home lt  a gt   lt  li gt

User · Answer

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    lt div  ngIf     some-route     isRouteActive  gt     lt  div gt    and don t forget to include pipe in the pipes dependencies

User · Answer

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   gt  this currentUrl   currentUrl          error   gt  console log error            isCurrentRoute route   string    boolean       return this currentUrl     route          And then in my HTML     lt a  routerLink     Contact    class  item   class active   isCurrentRoute  contact    gt Contact lt  a gt

User · Answer

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 lt ElementRef gt       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    gt          if  s instanceof NavigationEnd            this update                              ngOnInit             ngAfterViewInit            ngAfterContentInit           private update    void     if   this router navigated     this superclass  return        Promise resolve   then      gt            this previousUrl   this router url          this megaclass toArray   forEach   superclass    gt               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

User · Answer

Right now i m using rc 4 with bootstrap 4 and this one works perfect for me     lt li class  nav-item  routerLinkActive  active   routerLinkActiveOptions    exact  true   gt       lt a class  nav-link   routerLink         gt Home lt  a gt   lt  li gt    This will work for url    home

User · Answer

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

User · Answer

This helped me for active inactive routes   lt a routerLink  quot  user bob quot  routerLinkActive  rla  quot routerLinkActive quot   ngClass   quot rla isActive    classIfActive     classIfNotActive  quot  gt   lt  a gt   Ref

User · Answer

And in the latest version of angular  you can simply do check router isActive routeNameAsString   For example see the example below     lt div class  collapse navbar-collapse  id  navbarNav  gt       lt ul class  navbar-nav  gt         lt li class  nav-item   class active     router isActive   dashboard    gt           lt a class  nav-link  href     gt          lt span class  sr-only  gt  current  lt  span gt  lt  a gt         lt  li gt         lt li class  nav-item   class active     router isActive route path    ngFor  let route of  routes    async   gt           lt a class  nav-link  href  javascript void 0    ngIf  route childRoutes  amp  amp  route childRoutes length  gt  0             matMenuTriggerFor   menu  gt   route name   lt  a gt           lt a class  nav-link  href    route path               ngIf   route childRoutes    route childRoutes length     0  gt   route name   lt  a gt           lt mat-menu  menu  matMenu  gt             lt span  ngIf  route childRoutes  amp  amp  route childRoutes length  gt  0  gt               lt a  ngFor  let child of route childRoutes  class  nav-link  href    route path   child path                  mat-menu-item gt   child name   lt  a gt             lt  span gt           lt  mat-menu gt         lt  li gt       lt  ul gt       lt span class  navbar-text mr-auto  gt         lt small gt      lt  small gt      currentUser    async     currentUser    async  firstName                        currentUser    async     currentUser    async  lastName                    lt  span gt     lt  div gt    And make sure you are not forgetting injecting router in your component

User · Answer

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   lt style gt      active         color blue          lt  style gt      lt a routerLink   home   routerLinkActive     active    gt Home lt  a gt     lt a routerLink   about   routerLinkActive     active    gt About lt  a gt     lt a routerLink   contact   routerLinkActive     active    gt Contact lt  a gt

User · Answer

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   lt div  ngIf  routeIsActive       gt  My content  lt  div gt

User · Answer

As of Angular 8  this works    lt li routerLinkActive  active   routerLinkActiveOptions     exact  true    gt       lt a  routerLink          gt Home lt  a gt   lt  li gt      exact  true   ensures it matches the url

User · Answer

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

User · Answer

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        lt ul class  navbar-nav mr-auto  gt         lt li class  nav-item  routerLinkActive  active  gt           lt a class  nav-link  routerLink   home  gt Home lt  a gt         lt  li gt         lt li class  nav-item  routerLinkActive  active  gt           lt a class  nav-link  routerLink   about-us  gt About Us lt  a gt         lt  li gt         lt li class  nav-item  routerLinkActive  active  gt           lt a class  nav-link   routerLink   contact-us  gt Contact lt  a gt         lt  li gt       lt  ul gt

User · Answer

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

User · Answer

start with importing RouterLinkActive in your  ts     import   RouterLinkActive   from   angular router     Now use RouterLinkActive in your HTML   lt span class    routerLink    some path  routerLinkActive  class Name  gt Value lt  span gt  lt  a gt    provide some css to class  class Name    as when this link will be active clicked you will find this class on span while inspection

User · Answer

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    lt ul class  nav navbar-nav  gt       lt li  class active   isActive   Home     gt           lt a  routerLink     Home    gt Home lt  a gt       lt  li gt       lt li  class active   isActive   About     gt           lt a  routerLink     About    gt About lt  a gt       lt  li gt   lt  ul gt

User · Answer

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    lt li class  nav-item       routerLinkActive     active    gt     lt a class  nav-link        routerLink     home    gt Home    lt  a gt   lt  li gt    The above will add a class of active to the anchor tag if we are currently viewing the home route

User · Answer

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

User · Answer

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

User · Answer

As mentioned in one of the comments of the accepted answer  the routerLinkActive directive can also be applied to a container of the actual  lt a gt  tag    So for example with Twitter Bootstrap tabs where the active class should be applied to the  lt li gt  tag that contains the link     lt ul class  nav nav-tabs  gt       lt li role  presentation  routerLinkActive  active  gt           lt a routerLink    location  gt Location lt  a gt       lt  li gt       lt li role  presentation  routerLinkActive  active  gt           lt a routerLink    execution  gt Execution lt  a gt       lt  li gt   lt  ul gt    Pretty neat   I suppose the directive inspects the content of the tag and looks for an  lt a gt  tag with the routerLink directive

User · Answer

To mark active routes routerLinkActive can be used   lt a  routerLink    user  routerLinkActive  some class list  gt User lt  a gt    This also works on other elements like   lt div routerLinkActive  some class list  gt     lt a  routerLink    user  gt User lt  a gt   lt  div gt    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

User · Answer

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         lt ul class  nav nav-tabs  gt         lt li  class active    r isRouteActive  r generate   Home      gt           lt a  routerLink     Home    gt Home lt  a gt         lt  li gt         lt li  class active    r isRouteActive  r generate   Login      gt           lt a  routerLink     Login    gt Sign In lt  a gt         lt  li gt         lt li  class active    r isRouteActive  r generate   Feed      gt           lt a  routerLink     Feed    gt Feed lt  a gt         lt  li gt       lt  ul gt      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

User · Answer

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    lt li  class active   router isRouteActive router generate    Home      gt      lt a  routerLink      Home    gt Home lt  a gt   lt  li gt   lt li  class active   router isRouteActive router generate    SignIn      gt      lt a  routerLink      SignIn    gt Sign In lt  a gt   lt  li gt   lt li  class active   router isRouteActive router generate    ProfileFeed     username  user username       gt       lt a  routerLink      ProfileFeed     username  user username     gt Feed lt  a gt   lt  li gt    This has been my preferred solution for the problem so far  it might be helpful for you as well

User · Answer

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      lt li role  presentation   ngClass    active  isActive  home     gt       lt a  routerLink     Home    gt Home lt  a gt     lt  li gt     lt li role  presentation   ngClass    active  isActive  jobs     gt       lt a  routerLink     Jobs    gt Jobs lt  a gt     lt  li gt    Class   export class MainMenuComponent     router  Router     constructor data  Router        this router   data         isActive tab   boolean       if  this router currentInstruction  amp  amp  this router currentInstruction component routeData          return tab    this router currentInstruction component routeData data  activeTab              return false

User · Answer

In Angular2 RC2 you can use this simple implementation   lt a  routerLink      dashboard    routerLinkActive  active  gt Dashboard lt  a gt    this will add class active to the element with matched url  read more about it here

[javascript] In Angular, how do you determine the active route?

Examples related to javascript

Examples related to typescript

Examples related to angular

Examples related to angular2-routing