How to detect a route change in Angular

0 votes
I am looking to detect a route change in my AppComponent.

Thereafter I will check the global user token to see if he is logged in. Then I can redirect the user if he is not logged in.
Apr 22, 2020 in Angular by kartik
• 37,530 points
16,481 views

2 answers to this question.

+1 vote

Hii Kartik

For Angular 7 someone should write like:

this.router.events.subscribe((event: Event) => {})

A detailed example can be as follows:

import { Component } from '@angular/core'; 
import { Router, Event, NavigationStart, NavigationEnd, NavigationError } from '@angular/router';

@Component({
    selector: 'app-root',
    template: `<router-outlet></router-outlet>`
})
export class AppComponent {

    constructor(private router: Router) {

        this.router.events.subscribe((event: Event) => {
            if (event instanceof NavigationStart) {
                // Show loading indicator
            }

            if (event instanceof NavigationEnd) {
                // Hide loading indicator
            }

            if (event instanceof NavigationError) {
                // Hide loading indicator

                // Present error to user
                console.log(event.error);
            }
        });

   }
}
answered Apr 22, 2020 by Niroj
• 82,780 points
Thanks man....it helped me
0 votes

In Angular 2 you can subscribe (Rx event) to a Router instance. So you can do things like

class MyClass {
  constructor(private router: Router) {
    router.subscribe((val) => /*whatever*/)
  }
}

Edit (since rc.1)

class MyClass {
  constructor(private router: Router) {
    router.changes.subscribe((val) => /*whatever*/)
  }
}

Edit 2 (since 2.0.0)

see also : Router.events doc

class MyClass {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
        // see also 
        console.log(val instanceof NavigationEnd) 
    });
  }
}
answered Dec 16, 2020 by Gitika
• 65,930 points

Related Questions In Angular

0 votes
3 answers

How to load external scripts dynamically in Angular?

Hello kartik, You can use following technique to ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,780 points
38,493 views
0 votes
1 answer

How to create a URL in the controller .NET MVC?

Hello @kartik, If you just want to get ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,780 points
865 views
0 votes
1 answer

How do you bind an Enum to a DropDownList control in ASP.NET?

Hello @kartik, I probably wouldn't bind the data as it's ...READ MORE

answered Jul 23, 2020 in Angular by Niroj
• 82,780 points
949 views
0 votes
1 answer

How do I include a JavaScript script file in Angular and call a function from that script?

Hello @kartik, Refer the scripts inside the angular-cli.json (angular.json when using ...READ MORE

answered Sep 8, 2020 in Angular by Niroj
• 82,780 points
4,962 views
0 votes
1 answer

What is meant by passing the variable by value and reference in PHP?

Hello, When the variable is passed as value ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,780 points
619 views
0 votes
1 answer

Connection with MySQL server using PHP. How can we do that?

Hey @kartik, You have to provide MySQL hostname, ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,780 points
206 views
0 votes
1 answer

How to retrieve or obtain data from the MySQL database using PHP?

Hello kartik,  Actually there are many functions that  ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,780 points
582 views
0 votes
1 answer

What are the differences between mysqli_connect and mysqli_pconnect?

Hello, mysqli_pconnect() function is used for making a persistence ...READ MORE

answered Mar 27, 2020 in PHP by Niroj
• 82,780 points
1,226 views
0 votes
1 answer

How to know tools and bundlers after create a new workspace or a project in angular?

Hello @sajal, When you create projects and workspaces ...READ MORE

answered Aug 6, 2020 in Angular by Niroj
• 82,780 points
150 views
0 votes
1 answer

How to pass a string parameter from angular UI to node.js backend?

Hello Kartik, There are three ways to get ...READ MORE

answered Apr 22, 2020 in Angular by Niroj
• 82,780 points
4,887 views