How to detect path in Angular2

Question

I'm trying to make something like here: AngularJS show div based on url/condition

<span id="page-locator" *ngIf="location.path() == '/overview'">test</span>

but it doesn't work.

How can I achieve this in Angular2?

Thanks.

if you are looking for current page then check this link: H[ow do I get the absolute path of the current page in Angular 2?](http://stackoverflow.com/questions/37517183/how-do-i-get-the-absolute-path-of-the-current-page-in-angular-2) — sameer, Apr 10 '17 at 13:26

score 3 · Accepted Answer · answered Apr 10 '17 at 13:55

3

It looks like you're trying to use the path of the Angular router, correct? If so, you can inject the Router service into your component and use that in your view:

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

export class SomeComponent {
    constructor(public router: Router) { }
}

Then in your component template you can access the current router url via:

<span id="page-locator" *ngIf="router.url === '/overview'">test</span>

answered Apr 10 '17 at 13:55

DRiFTy

11,269
11
61
77

2

You could use `*ngIf="router.url.indexOf('/overview') >= 0"` in that scenario to determine if the url contains the route as well. – DRiFTy Apr 10 '17 at 14:12
How the... did I forget about indexOf()... thanks mate! – eric.dummy Apr 10 '17 at 14:18

score 0 · Answer 2 · answered Apr 10 '17 at 13:50

0

window.location is where you can get your information!

for an absolute path you can go this way :

constructor(location:Location) {
  console.log(location.prepareExternalUrl(location.path()));
}

answered Apr 10 '17 at 13:50

Felix Haeberle

1,530
12
19

score 0 · Answer 3 · answered Apr 10 '17 at 13:53

Try the following solution :

location: any;
constructor(private _router: Router) { 
      _router.events.subscribe((data:any) => { this.location = data.url; });
}

The data is an object and we need the url property contained in that object.

<span id="page-locator" *ngIf="location == '/overview'">test</span>

How to detect path in Angular2

3 Answers3