CODEWITHSUNDEEP
javascripttypescriptangular
Kevin
Kevin

Reputation: 685

How to get the current url in the browser in Angular 2 using TypeScript?

I need to get the current URL present in the browser in my Angular 2 application.

In JavaScript normally we do it using the window object.

How can I do this in Angular 2 using TypeScript?

Thanks.

Upvotes: 39

Views: 94389

Answers (7)

Surya R Praveen
Surya R Praveen

Reputation: 3745

Angular has many options and always use easy coding rather complicating it. As it says keep it simpler. Here is the code below

const url = new URL('../cats', 'http://www.example.com/dogs');
console.log(url.hostname); // "www.example.com"
console.log(url.pathname); // "/cats"

As @JayChase mentioned,

The Angular Universal will have issues while rendering and the whole application will fail due this window functions. Avoid using window functions.

Upvotes: 0

Florian Leitgeb
Florian Leitgeb

Reputation: 16624

It is not necessary to import complicated packages or inject something. Just use the methods you can find on window.location!

Such as:

  • window.location.href gives you the full URL
  • window.location.hostname gives you the host name
  • window.location.originwith this command you get the host name with protocol (e.g. https://)
  • and more as you can see here: click me

For IE<=10 users: location.origin may not be available, then you have to use location.protocol + "//" + location.hostname or use a polyfill or package like location-origin

Upvotes: 35

JustLearning
JustLearning

Reputation: 3322

This Link helped me:

  public static getCurrentAbsoluteSiteUrl(): string {
    if (window
        && "location" in window
        && "protocol" in window.location
        && "pathname" in window.location
        && "host" in window.location) {
      return window.location.protocol + "//" + window.location.host + window.location.pathname;
    }
    return null;
}

Upvotes: 4

JayChase
JayChase

Reputation: 11525

This is late but I thought it was worth updating. As of Angular2 final release you can import DOCUMENT from @angular/common and use that to get to the location.

import { Component, Inject } from '@angular/core';
import { DOCUMENT } from '@angular/common';

...

export class YourComponent {

    constructor(@Inject(DOCUMENT) private document: Document) { 
        console.log(this.document.location.href);
    }
}

Upvotes: 42

Ralph Lavelle
Ralph Lavelle

Reputation: 5769

Import the ActivatedRoute, (and the rest of the Router stuff too, if you want)

import { ActivatedRoute, Params, Router, UrlSegment } from '@angular/router';

making sure it's injected into the constructor,

constructor(private route: ActivatedRoute) { ... }

and on ngOnInit you can use this.route to inspect the URL. For instance, all the segments are in an array, which you can string together, as @ibgib suggested, like this:

let path = this.route.snapshot.url.join('/');

to give you something like "mars/moons/phobos".

Upvotes: 5

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657416

You can

See also

How do I get the absolute path of the current page in Angular 2?

Upvotes: 6

kbpontius
kbpontius

Reputation: 3917

For future travelers, a lot of the other answers are great. Another option, if you want everything before the pathname (e.g. https://example.com) then you can use:

window.location.origin

Here's a W3 article on the different window.location properties you can use: http://www.w3schools.com/js/js_window_location.asp

Cheers!

Upvotes: 4

Related Questions