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: How do I get the absolute path of the current page in Angular 2? — sameer
– sameer, Commented Apr 10, 2017 at 13:26

DRiFTy · Accepted Answer · 2017-04-10 13:55:57Z

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, 2017 at 13:55

DRiFTy

11.4k11 gold badges63 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

DRiFTy Over a year ago

You could use *ngIf="router.url.indexOf('/overview') >= 0" in that scenario to determine if the url contains the route as well.

eric.dummy Over a year ago

How the... did I forget about indexOf()... thanks mate!

Felix Haeberle · Accepted Answer · 2017-04-10 13:50:12Z

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, 2017 at 13:50

Felix Haeberle

1,61414 silver badges21 bronze badges

Comments

bougsid · Accepted Answer · 2017-04-10 13:53:41Z

0

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>

answered Apr 10, 2017 at 13:53

bougsid

941 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to detect path in Angular2

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related