How to get current route

Question

The current docs only talk about getting route params  not the actual route segments   For example  if i want to find the parent of current route  how is that possible

User · Answer

short version if you have Router imported then you can simply use some thing like  this router url       search   else do the following  1  Import the router  import   Router   from   angular router     2  Declare its entry in constructor  constructor private router  Router        3  Use its value in your function  yourFunction        if this router url       search              some logic            victor answer helped me  this is the same answer as him but with a little detail  as it might help someone

User · Answer

this router events subscribe  val    gt       const currentPage   this router url     Current page route   const currentLocation    this platformLocation as any  location href     Current page url

User · Answer

For your purposes you can use this activatedRoute pathFromRoot   import  ActivatedRoute  from   angular router   constructor public activatedRoute  ActivatedRoute        With the help of pathFromRoot you can get the list of parent urls and check if the needed part of the URL matches your condition   For additional information please check this article http   blog 2muchcoffee com getting-current-state-in-angular2-router  or install ng2-router-helper from npm  npm install ng2-router-helper

User · Answer

to get current router in angular 8 just do this import  ActivatedRoute  from   angular router    then inject it in constructor like constructor private route  ActivatedRoute     if you want get current route then use this route url if you have multiply name route like  home pages list and you wanna access individual then you can access each of like this route url value 0  path value 0  will give home  value 1  will give you pages and value 2  will give you list

User · Answer

You can use in the  ts file  import   Route  Router  NavigationStart   from   angular router    constructor private router  Router      this router events subscribe value   gt          if  value instanceof NavigationStart            console log value     your current route

User · Answer

To get the route segments   import   ActivatedRoute  UrlSegment   from   angular router    constructor  route  ActivatedRoute      getRoutes     const segments  UrlSegment     this route snapshot url

User · Answer

If you need to access the current url  usually you have to wait for NavigationEnd or NavigationStart to do something  If you just subscribe to the router events the subscription will output many events in the route lifecycle  Instead  use an RxJS operator to only filter for the Event you need  The beneficial side effect of this is now we have stricter types   constructor private router  Router        router events pipe        filter ev   gt   ev instanceof NavigationEnd         subscribe  ev  NavigationEnd    gt          console log ev url

User · Answer

this is simple  in angular 2 you only need to import the Router library like this   import   Router   from   angular router     Then in the constructor of the component or service you must instantiate it like this   constructor private  router  Router       Then in any part of the code  either in a function  method  construct  whatever         this  router events          subscribe               url any    gt                    let  ruta                       url url split      forEach element   gt                        if element       amp  amp   ruta                                ruta     element                                        console log  route     ruta      lt  lt  lt ---- Root path                 console log  to URL   url url      lt  lt  lt ---- Destination URL                                     console log  from URL   this  router url     lt  lt  lt ---- Current URL

User · Answer

this could be your answer  use params method of activated route to get paramter from URL route that you want to read  below is demo snippet  import  ActivatedRoute  from   angular router     Component      export class Test  constructor private route  ActivatedRoute   this route params subscribe params   gt                 this yourVariable   params  required param name

User · Answer

For those who are still looking for this  On Angular 2 x there are a few ways of doing it   constructor private router  Router  private activatedRoute  ActivatedRoute          string path from root to current route  i e  Root CurrentRoute    router url          just the fragment of the current route  i e  CurrentRoute    activatedRoute url value 0  path         same as above with urlSegment      activatedRoute url subscribe  url  urlSegment     gt  console log url 0  path          same as above    activatedRoute snapshot url 0  path        the url fragment from the parent route i e  Root       since the parent is an ActivatedRoute object  you can get the same using     activatedRoute parent url value 0  path     References     https   angular io docs ts latest api router index ActivatedRoute-interface html https   angular io docs ts latest api router index Router-class html https   angular io docs ts latest guide router html

User · Answer

x000D   x000D  router events subscribe e   gt    x000D        if  e instanceof NavigationEnd    x000D          this currentUrl   e url  x000D          x000D          x000D   x000D   x000D

User · Answer

import  ActivatedRoute  from   angular router   constructor private route ActivatedRoute       console log this route routeConfig path

User · Answer

You can use ActivatedRoute to get the current router  Original Answer  for RC version   I found a solution on AngularJS Google Group and it s so easy   ngOnInit       this router subscribe  url    gt  console log url        Here s the original answer  https   groups google com d msg angular wn1h0JPrF48 zl1sHJxbCQAJ

User · Answer

To reliably get the full current route you can use this  this router events subscribe     event  any    gt        if  event instanceof NavigationEnd          console log  this router url   this router url

User · Answer

In Angular2 Rc1 you can inject RouteSegment and pass them in naviagte method   constructor private router Router private segment RouteSegment        ngOnInit         this router navigate   explore   this segment

User · Answer

in component file   import  ActivatedRouteSnapshot  from   angular router    constructor state  ActivatedRouteSnapshot        console log state path      in routeing file

User · Answer

This applies if you are using it with an authguard this router events subscribe event   gt            if event instanceof NavigationStart               console log  this is what your looking for    event url

User · Answer

You can try with   import   Router  ActivatedRoute  from   angular router        constructor private router  Router  private activatedRoute ActivatedRoute    console log activatedRoute snapshot url      array of states console log activatedRoute snapshot url 0  path      Alternative ways  router location path      this works only in browser console     window location pathname  which gives the path name

User · Answer

An easier way if you can t access router url  for instance if you used skipLocationChange  you can use the following   constructor private readonly location  Location      ngOnInit    void     console log this location path

User · Answer

Inject Location to your component and read location path    You need to add ROUTER DIRECTIVES somewhere so Angular can resolve Location  You need to add import   RouterModule  to the module     Update  In the V3  RC 3  router you can inject ActivatedRoute and access more details using its snapshot property     constructor private route ActivatedRoute      console log route       or  constructor private router Router      router events subscribe           See also Angular 2 router event listener

User · Answer

With angular 2 2 1  in an angular2-webpack-starter based project  works this   export class AppComponent     subscription  Subscription    activeUrl  string     constructor public appState  AppState                private router  Router        console log   app  constructor AppComponent           ngOnInit         console log   app  ngOnInit        let  this   this      this subscription   this router events subscribe function  s          if  s instanceof NavigationEnd             this activeUrl   s urlAfterRedirects                         ngOnDestroy         console log   app  ngOnDestroy          this subscription unsubscribe            In AppComponent s template you can use e g    activeUrl     This solution is inspired by RouterLinkActive s code

User · Answer

for new router    RC 3  Best and a simple way to do this is   import   Router   from   angular router   constructor router  Router           router events subscribe  url any    gt  console log url          console log router url       to print only path eg   login

User · Answer

The new V3 router has a url property   this router url       login

User · Answer

angular 2 rc2  router urlTree contains router createUrlTree    home

User · Answer

Use this  import   Router  NavigationEnd   from   angular router    constructor private router  Router        router events filter event   gt  event instanceof NavigationEnd           subscribe event   gt                console log event                   And in main ts import  import  rxjs add operator filter     EDIT  Modern way  import  filter  from  rxjs operators    router events pipe      filter event   gt  event instanceof NavigationEnd         subscribe event   gt            console log event

User · Answer

Here is what is working for me in Angular 2 3 1    location  any   constructor private  router  Router             router events subscribe  data any    gt    this location   data url             console warn this location       This should print only path e g    home      The data is an object and we need the url property contained in that object  So we capture that value in a variable and we can use that variable in our HTML page as well  For example  I want to show a div only when user is on Home page  In this case  my router url value will be  home  So I can write a div in the following way    lt div  ngIf  location      home   gt  This is content for the home page   lt  div gt

User · Answer

As of now  I m getting my path as follows -  this router url subscribe value   gt           you may print value to see the actual object        console log JSON stringify value        this isPreview   value 0  path      preview        Where  router is an instance of ActivatedRoute

User · Answer

I was facing the problem where I needed the URL path when the user is navigating through the app or accessing a URL  or refreshing on a specific URL  to display child components based on the URL    More  I want an Observable that can be consumed in the template  so router url was not an option  Nor router events subscription because routing is fired before the component s template is initialized   this currentRouteURL    this router events pipe       startWith this router        filter            event    gt  event instanceof NavigationEnd    event instanceof Router              map  event  NavigationEnd   Router    gt  event url       Hope it helps  good luck

User · Answer

To find the parent of the current route  you can obtain the UrlTree from the router  using relative routes   var tree UrlTree   router createUrlTree           relativeTo  route      Then to get the segments of the primary outlet    tree root children PRIMARY OUTLET  segments

User · Answer

The native window object works fine as well  console log  URL     window location href   console log  Path     window location pathname   console log  Host     window location host   console log  Hostname     window location hostname   console log  Origin     window location origin   console log  Port     window location port   console log  Search String     window location search     NOTE  DO NOT USE THIS IN SERVER SIDE RENDERING

User · Answer

I had the same problem using   this router url   I get the current route with query params  A workaround I did was using this instead   this router url split      0    Not a really nice solution  but helpful

User · Answer

import   Router  NavigationEnd   from   angular router    constructor private router  Router         Detect current route   router events subscribe val   gt        if  val instanceof NavigationEnd          console log val url

User · Answer

WAY 1  Using Angular  this router url   import   Component   from   angular core       Step 1  import the router  import   Router   from   angular router     Component       template   The href is    href               Other component settings           export class Component       public href  string              Step 2  Declare the same in the constructure      constructor private router  Router          ngOnInit             this href   this router url             Do comparision here                                                  console log this router url                WAY 2 Window location as we do in the Javascript  If you don t want to use the router   this href  window location href

User · Answer

Angular RC4   You can import Router from  angular router  Then inject it   constructor private router  Router          Then call it s URL parameter   console log this router url        routename

User · Answer

import   Router   from   angular router   constructor router  Router           console log router routerState snapshot url

[angular] How to get current route

Examples related to angular

Examples related to angular2-routing