I'm relatively new to front-end stuff, I was playing around with Angular 6, so the issue I'm facing with the following component is that NavigationEnd returns undefined and I can't figure out why:

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebarponent.html',
  styleUrls: ['./sidebarponent.scss']
})
export class SidebarComponent implements OnInit {
  currentUrl: string;

  constructor(private router: Router) {
    router.events.subscribe(
      (navEnd: NavigationEnd) => this.currentUrl = navEnd.url
    );
  }
}

I'm relatively new to front-end stuff, I was playing around with Angular 6, so the issue I'm facing with the following component is that NavigationEnd returns undefined and I can't figure out why:

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

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.scss']
})
export class SidebarComponent implements OnInit {
  currentUrl: string;

  constructor(private router: Router) {
    router.events.subscribe(
      (navEnd: NavigationEnd) => this.currentUrl = navEnd.url
    );
  }
}

• javascript
• angular
• typescript
• rxjs
• router

• What do you mean "NavigationEnd returns undefined"? – user184994 Commented Jul 28, 2018 at 18:09
• 2 Pretty sure router.events has more than just NavigationEnd events; angular.io/api/router/Event – Jusmpty Commented Jul 28, 2018 at 18:10
• @user184994 Oops sorry... – TheBinaryGuy Commented Jul 28, 2018 at 18:16
• Take note of the point raised by @Jusmpty and have a look at this for a solution – user184994 Commented Jul 28, 2018 at 18:17
• @user184994 sure.. – TheBinaryGuy Commented Jul 28, 2018 at 18:19

6 Answers 6

router.events has different events, if you need to get the NavigationEnd you need to filter as follows. Try this,

 router.events
      .pipe(filter(e => e instanceof NavigationEnd))
      .subscribe((e: NavigationEnd) => {
        this.currentUrl = e.url;       
 });

You need to check which type of events you receive from the subscribe method.

Also you need to use this to access router ( it's a private variable)

 constructor(private router: Router) {
this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) {
      this.currentUrl = event.url
      console.log('NavigationEnd:', event);
    }
  })

I think what you are trying to achive is the following.

this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd),
    map(() => this.activatedRoute)
 ).subscribe((event) => {
       this.currentUrl = event.url
});

Inject ActivatedRoute in the constructor.

you can also use this in async, for checking a condition,

async getUrl(){
    this._router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((path:NavigationEnd)=>{
    console.log("path",path);  
    this.activeUrl=path.url.split('/');
    this.activeUrl.splice(0,1)
    console.log("activeurl",this.activeUrl);
    return this.activeUrl;
    })
}
this.getUrl().then(()=>{
    if(this.activeUrl[1]=='admin'){
    //your code goes here
    }
})

Quick Fix,

change the code

(navEnd: NavigationEnd) => this.currentUrl = navEnd.url

to

(navEnd: NavigationEnd) => this.currentUrl = router.url

Just one line change required to make it work on Angular 7

router.events.subscribe(() => this.currentUrl = this.router.url)