How to get only path from full url string

Question

When using Router ( this.router.url) I am get the string /MyRouterName?type=abc, sometime /MyRouterName if not have parameter

Can I only get the path /MyRouterName (for all cases) from the full url?

Answer 1

You can use the activated route component's snapshot to get this url.

    import { Router, ActivatedRoute } from '@angular/router';
     constructor(
        private router: Router,
        private activatedRoute: ActivatedRoute) {

        console.log("routes");
        console.log(activatedRoute.snapshot.url); // array of states
        console.log(activatedRoute.snapshot.url[0].path); 
    }

Link to original SO answer by Jose G Varanam How to get current route

Answer 2

if you reload page , you can not get route path by Router or ActivatedRoute . You can use window.location.pathname instead of that.

Answer 3

The answer user5049376 has given didn't work for me. the url property was undefined.

console.log(activatedRoute.snapshot.url[0].path); 

instead of that I used the firstChild property.

console.log(this.activatedRoute.snapshot.firstChild.url[0].path);

Answer 4

This works for me.

Import this :

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

then pass it to the constructor :

path: any;

constructor(private router: Router) {
  this.path = this.router.url;
  console.log(this.path);
}

Answer 5

I have tried to use the other responses and they all end up with undefined.

So I did this:

#AppComponent
constructor(private router: Router){
  // Subscribe to RouterEvents
  this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationStart) {
      // Could add more chars url:path?=;other possible
      const urlDelimitators = new RegExp(/[?//,;&:#$+=]/);
      let currentUrlPath = event.url.slice(1).split(urlDelimitators)[0];
      console.log('URL_PATH: ', currentUrlPath);
    }
  });
}

I subscribe to the router changes so when NavitionStartEvent happens a new URL_PATH is found.

Answer 6

Isn't this simple and effective?

let path = this.router.url.split("?")[0];

Answer 7

For me, this is the cleanest solution I managed to do. I hope it helps

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

constructor(private router: Router){}

getUrlWithoutParams(){
   let urlTree = this.router.parseUrl(this.router.url);
   urlTree.queryParams = {}; 
   return urlTree.toString();
}

Answer 8

If you don't need to support IE you can use the URL class to do reverse-engineer the url components from the string:

(new URL(this.router.url), 'x:/').pathName

Considering your example, the code above would yield only the "/MyRouterName" part of "/MyRouterName?type=abc".

Note: the 'x:/' part only exists to satisfy the URL class' need for a protocoll (which this.router.url doesn't provide).

Answer 9

Below code works with both: non-hash and hash (e.g https://site/#/user)urls

public openInNewTab(router: Router, namedRoute ) {
      let newRelativeUrl = router.createUrlTree([namedRoute]);
      let baseUrl = window.location.href.replace(router.url,'');

      window.open(baseUrl + newRelativeUrl, '_blank');
}

Answer 10

Following approach worked for me in Angular 8

URL

http://localhost:4200/admin/audit_trail

What I wanted to extract?

admin

Code

constructor(
    private route: ActivatedRoute
) {
    const path = this.route.snapshot.parent.routeConfig.path;
}

// path = 'admin'

Answer 11

Great answers here... Allow me to add an alternative:

The UrlReflectionService provided by the @bespunky/angular-zen library.

import { Component            } from '@angular/core';
import { UrlReflectionService } from '@bespunky/angular-zen/router-x';

@Component({
    selector   : 'app-demo',
    templateUrl: './demo.component.html',
    styleUrls  : ['./demo.component.css']
})
export class DemoComponent
{   
    constructor(public urlReflection: UrlReflectionService)
    {
        // use properties (e.g. `routeUrl`, `queryString`) from `this.urlReflection`
        // to extract parts of the current url

        // use methods (e.g. `routeOf()`, `queryStringOf()`) from `this.urlReflection`
        // to extract parts of any url 
    }
}

Live Example

TLDR 1

The service facilitates all kinds of url extraction and manipulation operation, and even exposes the RegEx objects it internally uses in case you need further customization.

TLDR 2

Remember to:

1. npm install @bespunky/angular-zen

2. Import RouterXModule (for root or child).