How do I get URL in angular?

Question

I need to make my hamburger button be an hamburger or a cross depending on the url. So I need to get my current url.

This is what I have right now:

When I click the hamburger button, the view switches to the settings view (like intended) and my url changes to "http://localhost:4200/settings", but when I try to get the url it returns just a '/'.

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

public href: string = "";

  constructor(private router: Router) { }


  ngOnInit() {
    this.href = this.router.url;
        console.log(this.router.url);
  }

}

##########EDIT#############

The answer by Alvaro worked but it refreshes the page (I haven't thought about it before, sorry). And I just want it to change view and not refresh the page.

What I have right now is:

header.component.html

<div class="hamburguer">
        <a (click)="getUrl(); showFirst=!showFirst;">
            <img *ngIf="!showFirst" src="assets/images/hamburguer.png" id="hamburguer">
            <img *ngIf="showFirst" src="assets/images/cross.png" id="hamburguer">
        </a>
</div>

header.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {

  constructor(private router: Router, private _location: Location) { }

  getUrl(){

    if(window.location.pathname != "/settings"){
        window.location.pathname = "/settings";
    }else{
        this._location.back();
    }

  }

  ngOnInit() {
  }

}

Here's a video: https://vimeo.com/342053009

Did you try adding `router.url` inside the constructor and log it? — Furqan Rahamath, Jun 13 '19 at 13:57
It is because you are assigning url only on `ngOnInit` and it does not change unless you reconstruct `HeaderComponent`. You need to subscribe route changes. @Alvaro's answer should help you — Harun Yilmaz, Jun 13 '19 at 14:04
Possible duplicate of [Get the current URL with JavaScript?](https://stackoverflow.com/questions/1034621/get-the-current-url-with-javascript) — wentjun, Jun 13 '19 at 14:10

score 4 · Accepted Answer · edited Jun 13 '19 at 14:11

4

You could get it with pure javascript: window.location.pathname

Or use the ActivatedRoute and also subscribe to its URL events. Here is an example:

constructor(public activatedRoute: ActivatedRoute) {

   activatedRoute.url.subscribe(url => {
       // do what you need here
   }
}

And to import the ActivatedRoute add the following line:

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

Hope it helps!

edited Jun 13 '19 at 14:11

Harun Yilmaz

8,281
3
24
35

answered Jun 13 '19 at 13:57

Alvaro

1,853
18
24

ty! i used the ````window.loaction.pahtname```` and it worked. the only problem is that it refreshes the page (i haven't thought about this before, sorry), and I just want it to change the view. I edited my post so you can see what i have right now – Nuno Miguel Costa Jun 13 '19 at 15:38
1

To change the view, have you tried with `this.router.navigate(['../new-package'], {relativeTo:this.activatedRoute});` ? – Alvaro Jun 13 '19 at 15:46

score 0 · Answer 2 · answered Jun 13 '19 at 14:00

0

Try this:

 import { Location } from "@angular/common";

 url: string;
 constructor(location: Location) {
    this.url = location.path();
 }

answered Jun 13 '19 at 14:00

Ghoul Ahmed

4,446
1
14
23

How do I get URL in angular?

2 Answers2