Get current url in Angular

Question

How can I get the current url in Angular 4  I ve searched the web for it a lot  but am unable to find solution   app module ts  import   BrowserModule   from   angular platform-browser   import   NgModule   from   angular core   import   RouterModule  Router   from   angular Router    import   AppComponent   from    app component   import   TestComponent   from    test test component   import   OtherComponent   from    other other component   import   UnitComponent   from    unit unit component     NgModule      declarations        AppComponent      TestComponent      OtherComponent      UnitComponent         imports        BrowserModule      RouterModule forRoot                         path   test               component  TestComponent                                  path   unit               component  UnitComponent                                  path   other               component  OtherComponent                           providers        bootstrap   AppComponent      export class AppModule       app component html   lt  -- The content below is only a placeholder and can be replaced -- gt   lt div gt       lt h1 gt Welcome to   title     lt  h1 gt        lt ul gt           lt li gt               lt a routerLink   test  gt Test lt  a gt           lt  li gt           lt li gt                lt a routerLink   unit  gt Unit lt  a gt             lt  li gt           lt li gt               lt a routerLink   other  gt Other lt  a gt           lt  li gt       lt  ul gt   lt  div gt   lt br  gt   lt router-outlet gt  lt  router-outlet gt    app component ts  import   Component  from   angular core     Component        selector   app-root       templateUrl     app component html       styleUrls      app component css       export class AppComponent      title    Angular JS 4       arr     abcd   xyz   pqrs        other component ts  import   Component  OnInit   from   angular core   import   Location   from   angular common   import   Router   from   angular router     Component     selector   app-other     templateUrl     other component html     styleUrls      other component css       export class OtherComponent implements OnInit        public href  string           url  string    asdf        constructor private router   Router          ngOnInit             this href   this router url          console log this router url             test component ts  import   Component  OnInit   from   angular core   import   Location   from   angular common   import   Router   from   angular router     Component     selector   app-test     templateUrl     test component html     styleUrls      test component css       export class TestComponent implements OnInit       route  string      currentURL          constructor              this currentURL   window location href              ngOnInit           Right now I am getting console issue after clicking on other link  ERROR Error  Uncaught  in promise   Error  No provider for Router

User · Answer

You can make use of location service available in @angular/common and via this below code you can get the location or current URL

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

@Component({
  selector: 'app-top-nav',
  templateUrl: './top-nav.component.html',
  styleUrls: ['./top-nav.component.scss']
})
export class TopNavComponent implements OnInit {

  route: string;

  constructor(location: Location, router: Router) {
    router.events.subscribe((val) => {
      if(location.path() != ''){
        this.route = location.path();
      } else {
        this.route = 'Home'
      }
    });
  }

  ngOnInit() {
  }

}

here is the reference link from where I have copied thing to get location for my project. https://github.com/elliotforbes/angular-2-admin/blob/master/src/app/common/top-nav/top-nav.component.ts

User · Answer

With pure JavaScript   console log window location href   Using Angular   this router url  import   Component   from   angular core   import   Router   from   angular router     Component       template   The href is    href               Other component settings           export class Component       public href  string            constructor private router  Router          ngOnInit             this href   this router url          console log this router url             The plunkr is here  https   plnkr co edit 0x3pCOKwFjAGRxC4hZMy p preview

User · Answer

other component ts  So final correct solution is    import   Component  OnInit   from   angular core   import   Location   from   angular common   import   Router   from   angular router         router  it must be in small case          Component         selector   app-other         templateUrl     other component html         styleUrls      other component css               export class OtherComponent implements OnInit            public href  string               url  string    asdf            constructor private router   Router        make variable private so that it would be accessible through out the component          ngOnInit                 this href   this router url              console log this router url

[javascript] Get current url in Angular

Examples related to javascript

Examples related to angular

Examples related to typescript

Examples related to url-routing