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,520 points
29,036 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);
            }
        });

   }
}

Hope this helps!

To know more about Angular, It's recommended to join Angular course today.

Thanks.

answered Apr 22, 2020 by Niroj
• 82,880 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,890 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,880 points
71,370 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,880 points
5,837 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,880 points
2,939 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,880 points
14,009 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,880 points
3,211 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,880 points
1,241 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,880 points
3,292 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,880 points
3,679 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,880 points
785 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,880 points
10,682 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP