Let's fix Angular 2 this.router.events.subscribe does not work on refresh or when url is typed in issue

Issue

I have an app written in Angular 2, the nav is supposed to look slightly different on each route. I am listening for NavigationEnd using this.router.events.subscribe It works fine when clicking links, but this method does not seem to be fired when the page is refreshed or when you type a route into the url bar.

This is part of my subscribe function:

subscribeToEvents() {
    this.router.events.subscribe((val) => {
        // see also 
        if (val instanceof NavigationEnd) {
            this.getCompanyName();
            var rou = val.url.toLowerCase().trim();
            console.log("our route", rou);
            switch (rou) {
                case "/projectlist":
                    this.currentPage = "projects";
                    this.page = "Project List";
                    break;

I have tried console logging this.router.url to see what comes up and it just always console logs '/' when I refresh the page.

Solution

I figured out a solution, I just added a timeout to the navbar's ng-init and then this.router.url gets the correct route.

      setTimeout(() => {
            if (this.router.url === '/projectlist') {
                this.currentPage = "projects";
                this.page = "Project List"
            } else if (this.router.url === '/dashboard') {
                this.currentPage = "dashboard";
                this.page = "Dashboard";
            } else if (this.router.url === '/equipmentlist') {
                this.currentPage = "equipment";
                this.page = "Equipment"
            } else if (this.router.url === '/recipelist') {
                   ... more routes ...
            } else {
                this.page = "Default";
            }
        }, 100);

Answered By - jmona789