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
– Furqan Rahamath, Commented Jun 13, 2019 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
– Harun Yilmaz, Commented Jun 13, 2019 at 14:04

Harun Yilmaz · Accepted Answer · 2019-06-13 14:11:24Z

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, 2019 at 14:11

Harun Yilmaz

8,5893 gold badges30 silver badges40 bronze badges

answered Jun 13, 2019 at 13:57

Alvaro

2,06520 silver badges26 bronze badges

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

2 Comments

Nuno Miguel Costa Over a year ago

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

Alvaro Over a year ago

To change the view, have you tried with this.router.navigate(['../new-package'], {relativeTo:this.activatedRoute}); ?

Ghoul Ahmed · Accepted Answer · 2019-06-13 14:00:56Z

0

Try this:

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

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

answered Jun 13, 2019 at 14:00

Ghoul Ahmed

4,8192 gold badges17 silver badges25 bronze badges

Collectives™ on Stack Overflow

How do I get URL in angular?

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related