How to detect a route change in Angular?

Question

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

Thereafter I will check the global user token to see if the user is logged in so that I can redirect the user if the user is not logged in.

https://www.techiediaries.com/angular-candeactivate/ – rofrol May 17 '22 at 14:37 — rofrol, May 17 '22 at 14:37

score 782 · Accepted Answer · edited Aug 12 '20 at 21:51

782

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) 
    });
  }
}

edited Aug 12 '20 at 21:51

Marco

1,073
9
22

answered Nov 05 '15 at 15:44

Ludohen

8,299
1
14
14

Regarding the deprecated version: For some reason this would not detect the first route change i'm making on initial load. I had to wrap this in a timeout of 400ms in the constructor, or 300ms in ngAfterViewInit, and then it works every time. ...even still, `val` is empty when using the browser back and forward buttons :( – Post Impatica Jun 02 '16 at 01:43
Does anyone has a plunker example for this? I am having dependency injection error by only injecting Router. – allenhwkim Jul 24 '16 at 22:27
Is there a way to get the `data` in this event I passed in route configuration? – Akshay Oct 20 '16 at 10:45
4

I am able to get data by `event._root.children[0].value._routeConfig.data` I hope there can be better way – Akshay Oct 20 '16 at 11:38
8

@Akshay have you seen this article by Todd Motto: [Dynamic page titles in Angular 2 with router events] (https://toddmotto.com/dynamic-page-titles-angular-2-router-events) – Bogac Nov 23 '16 at 09:06
12

why does it fire 3 times? – Toolkit Dec 05 '16 at 17:01
2

@Toolkit its because the event has 3 states and in a success change of url. The 3 states are :'NavigationStart', 'NavigationEnd' and 'RoutesRecognized' – napstercake Jun 06 '17 at 03:01
1

How to I make it fire only once? – masterach Dec 07 '17 at 14:53
dont you have to unsubscribe? – Wagner Danda da Silva Filho May 23 '18 at 16:57
2

you could check `if (val instanceof NavigationStart)` to make it fire once – blueprintchris May 31 '18 at 15:05
39

you can filter the events easily with RxJS `filter` operator. `router.events.pipe(filter(e => e instanceof NavigationEnd).subscribe((e) => { ... }` – Simon_Weaver Dec 27 '18 at 05:08
Perfect, How can I get exact param.id of url ? @Ludohen – ShibinRagh May 16 '19 at 14:39
5

@Simon_Weaver iam not sure but i think you forgot a closing bracket before ```.subscribe(``` – WastedFreeTime Apr 24 '20 at 16:50
@WastedFreeTime yes. I can’t fix it because it’s a comment. Thx – Simon_Weaver Apr 24 '20 at 19:56
to get event url I use `router.events .pipe(filter((event): event is NavigationEnd => event instanceof NavigationEnd)) .subscribe((event: NavigationEnd) => { console.log(event.url); });` – Leonardo Rick Jul 15 '22 at 15:08

score 408 · Answer 2 · edited Nov 24 '20 at 19:18

408

RxJS 6

router.events.pipe(filter(event => event instanceof NavigationStart))

Thanks to Peilonrayz (see comments below)

new router >= RC.3

import { Router, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RoutesRecognized } from '@angular/router';

constructor(router:Router) {
  router.events.forEach((event) => {
    if(event instanceof NavigationStart) {
    }
    // NavigationEnd
    // NavigationCancel
    // NavigationError
    // RoutesRecognized
  });
}

You can also filter by the given event:

import 'rxjs/add/operator/filter';

constructor(router:Router) {
  router.events
    .filter(event => event instanceof NavigationStart)
    .subscribe((event:NavigationStart) => {
      // You only receive NavigationStart events
    });
}

Using the pairwise operator to get the previous and current event also is an nice idea. https://github.com/angular/angular/issues/11268#issuecomment-244601977

import 'rxjs/add/operator/pairwise';
import { Router } from '@angular/router';

export class AppComponent {
    constructor(private router: Router) {
        this.router.events.pairwise().subscribe((event) => {
            console.log(event);
        });
    };
}

edited Nov 24 '20 at 19:18

ElliotSchmelliot

7,322
4
41
64

answered Jun 28 '16 at 15:41

Günter Zöchbauer

623,577
216
2,003
1,567

Thank you. How do I update my version of the router with got bash command? – AngularM Jun 28 '16 at 17:27
Sorry, I don't know, I only use it from prepared Plunker. Locally I use Dart. – Günter Zöchbauer Jun 28 '16 at 19:36
1

@GunterZochbauer instead of 'is' I would use 'instanceof'. And 'event: Event' should be in parentheses. Thanks for this, pretty powerful new feature! I like it – Maxim Jul 16 '16 at 12:41
2

This does throw a compilation error on the current versions ```Argument of type '(event: Event) => void' is not assignable to parameter of type``` – Rudi Strydom Aug 28 '16 at 20:46
@RudiStrydom That looks like a mistake in your code. Nothing has changed here since RC.3. Can you please create a new question and add the code that allows to reproduce. – Günter Zöchbauer Aug 29 '16 at 05:40
What would be the appropriate solution to get the component as well(>= RC5)? I want to use the title service to set the document.title when the route changes. The title name I would like to fetch from the component itself or attach it to the route information. – Gambo Sep 02 '16 at 09:12
@Gambo please create a new question. That doesn't seem to be related to this question. – Günter Zöchbauer Sep 02 '16 at 09:13
1

@RudiStrydom & Günter Zöchbauer - the `Argument of type '(event: Event) => void' is not assignable to parameter of type` error is because in your filter snippet you are subscribing to an object of type Event instead of NavigationEvent. – Bonnici Sep 25 '16 at 07:48
Is there a way to get the `data` in this event I passed in route configuration? – Akshay Oct 20 '16 at 10:46
Doesn't look like it. You can inject the `Router` and try to get it from `router.routerstate.activatedRoute...` or `router.routerstate.snapshot...` Not sure if it's available there, it's quite some time I checked. – Günter Zöchbauer Oct 20 '16 at 10:54
2

Second sample should be NavigationEvent instead of Event. Also dont forget to import "Event as NavigationEvent" from @angular/router – Mick Jan 05 '17 at 21:02
@Mick thanks for the hint. That changed a while back and it seems I missed that when updating. I find the imports a bit redundant. Every type needs to be imported anyway. – Günter Zöchbauer Jan 05 '17 at 21:36
1

The hint about the import was for anyone looking to solve this error :) – Mick Jan 05 '17 at 22:00
on every route change `pairwise` is being called thrice any reason @GünterZöchbauer / – Pardeep Jain Apr 10 '17 at 10:53
1

in angular 5 -> "property 'filter' does not exist on type 'Observable' " – tatsu Feb 16 '18 at 13:27
1

Same response as on the other answer. `filter` is not related to Angular. `Observable` is RXSJ5 and there still is `filter` – Günter Zöchbauer Feb 16 '18 at 13:28
1

I just applied `router.events.pipe(filter(event => event instanceof NavigationStart)) ` on AppRoutingModule, now its working fine. Thanks. – Pullat Junaid Nov 30 '18 at 04:29
1

You improve your filter statement by making it a typeguard: ``router.events.pipe(filter((event: Event): event is NavigationEnd => event instanceof NavigationEnd));``. See https://github.com/ReactiveX/rxjs/issues/3125#issuecomment-345557136 – Pieter De Bie Feb 01 '19 at 12:40

score 159 · Answer 3 · edited Apr 12 '21 at 11:41

159

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);
            }
        });

   }
}

edited Apr 12 '21 at 11:41

Pini Cheyni

5,073
2
40
58

answered Nov 08 '18 at 12:40

Сергій Козюк

1,877
1
8
8

2

This is great! very comprehensive! worked perfectly on Angular 7. – MaylorTaylor Feb 01 '19 at 21:54
1

Usually the navigation itself takes very little time if you use preloading strategy. In terms of usability I would use loading indicators only on backend http requests, if at all. – Phil Mar 27 '19 at 22:24
This works perfectly. My requirement is for a particular route->component, listener implement in that particular component only should be triggered. Is there any way I can limit the event listening confined to a component because I have multiple components implementing these listener and all of them get fired when rout changes. – Ankit Sahu Apr 02 '19 at 14:28
6

In the **constructor**, you should not use , your case is for ngOnInit. – Christian Soto Apr 08 '19 at 02:23
1

Perfect, How can I get exact param.id of url ? – ShibinRagh May 16 '19 at 14:34
2

The solution is not component limited, it spreads throughout the app, consuming resources – Md Rafee Aug 23 '19 at 06:57
1

@SergioReis I don't see any problem using the constructor here. You cannot access/use `this` if it refers to an `@Input()`, but here, `this.router` is injected in the constructor, so perfectly defined... – Random Jan 23 '21 at 14:47

score 86 · Answer 4 · edited Apr 12 '21 at 11:42

86

Angular 7, if you want to subscribe to router

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

import { filter } from 'rxjs/operators';

constructor(
  private router: Router
) {
  router.events.pipe(
    filter(event => event instanceof NavigationEnd)  
  ).subscribe((event: NavigationEnd) => {
    console.log(event.url);
  });
}

edited Apr 12 '21 at 11:42

Pini Cheyni

5,073
2
40
58

answered Oct 08 '18 at 07:47

Druta Ruslan

7,171
2
28
38

4

it does not capture the redirect event – Anandhu Ajayakumar Jun 05 '19 at 11:47
2

@AnandhuAjayakumar Of course yes it works ! the event has two properties `url` and `urlAfterRedirects`, in case of a redirect the event has `url` set to from which path redirection is made and `urlAfterRedirects` set to path after redirect – Serene Abraham Mathew Jan 29 '21 at 13:32

score 51 · Answer 5 · answered Oct 31 '17 at 07:47

Angular 4.x and above :

This can be achieved using url property of ActivatedRoute class as below,

this.activatedRoute.url.subscribe(url =>{
     console.log(url);
});

Note: That you need to import and inject the provider from angular/router package

import { ActivatedRoute } from '@angular/router`

and

constructor(private activatedRoute : ActivatedRoute){  }

score 36 · Answer 6 · edited Apr 12 '21 at 11:42

In Angular 8 you should do like this.router.events.subscribe((event: Event) => {})

Example:

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

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

    constructor(private router: Router) {
        //Router subscriber
        this.router.events.subscribe((event: Event) => {
            if (event instanceof NavigationStart) {
                //do something on start activity
            }

            if (event instanceof NavigationError) {
                // Handle error
                console.error(event.error);
            }

            if (event instanceof NavigationEnd) {
                //do something on end activity
            }
        });
   }
}

score 19 · Answer 7 · edited Apr 12 '21 at 11:42

19

In angular 6 and RxJS6:

import { filter, debounceTime } from 'rxjs/operators';

 this.router.events.pipe(
      filter((event) => event instanceof NavigationEnd),
      debounceTime(40000)
    ).subscribe(
      x => {
      console.log('val',x);
      this.router.navigate(['/']); /*Redirect to Home*/
}
)

edited Apr 12 '21 at 11:42

Pini Cheyni

5,073
2
40
58

answered Jun 15 '18 at 13:12

JBRandri

295
2
9

3

you missed import for Router `import {Router, NavigationEnd} from "@angular/router"` – Damir Beylkhanov Jul 27 '18 at 15:08

score 18 · Answer 8 · answered Jul 06 '16 at 16:52

18

Router 3.0.0-beta.2 should be

this.router.events.subscribe(path => {
  console.log('path = ', path);
});

answered Jul 06 '16 at 16:52

Mike Lallemont

189
1
2

that works for current path but what about previous? – tatsu Feb 16 '18 at 13:29

score 18 · Answer 9 · edited Nov 18 '20 at 14:34

In Angular 10, you can do something like the following...

    import { Component, OnInit } from '@angular/core';
    import { Router, NavigationEnd } from '@angular/router';
    import { filter } from 'rxjs/operators';
    
    @Component({
      selector: 'app-my-class',
      templateUrl: './my-class.component.html',
      styleUrls: ['./my-class.component.scss']
    })
    export class MyClassComponent implements OnInit {
      constructor(private router: Router) {}
    
      ngOnInit(): void {
        this.router.events
        .pipe(filter(event => event instanceof NavigationEnd))  
        .subscribe((event: NavigationEnd) => {
          // code goes here...
        });
      }
    }

sir i have redirect to another page after subscribe but its redirected ? — Kapil Soni, Jan 25 '21 at 09:57

score 17 · Answer 10 · edited May 23 '17 at 12:02

17

The answers here are correct for router-deprecated. For the latest version of router:

this.router.changes.forEach(() => {
    // Do whatever in here
});

or

this.router.changes.subscribe(() => {
     // Do whatever in here
});

To see the difference between the two, please check out this SO question.

Edit

For the latest you must do:

this.router.events.subscribe(event: Event => {
    // Handle route change
});

edited May 23 '17 at 12:02

Community

1
1

answered May 07 '16 at 15:38

Dehli

5,950
5
29
44

Does it provide any data of previous and current route? – akn Jun 25 '16 at 17:39
The `router` has been updated again (I haven't updated my answer yet), so I'm not sure how it is for the latest. For the `router` I wrote about, you couldn't. @akn – Dehli Jun 25 '16 at 18:34
Please could you provide some context for this answer? which lines are you replacing in the other solutions with yours? – Gerard Simpson Nov 01 '16 at 02:11

score 12 · Answer 11 · edited Apr 19 '19 at 06:03

In the component, you might want to try this:

import {NavigationEnd, NavigationStart, Router} from '@angular/router';

constructor(private router: Router) {
router.events.subscribe(
        (event) => {
            if (event instanceof NavigationStart)
                // start loading pages
            if (event instanceof NavigationEnd) {
                // end of loading paegs
            }
        });
}

webmaster_sean · Answer 12 · 2019-12-31T00:21:57.863

Location works...

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {

    constructor(private location: Location) {
        this.location.onUrlChange(x => this.urlChange(x));
    }

    ngOnInit(): void {}

    urlChange(x) {
        console.log(x);
    }
}

score 10 · Answer 13 · answered Aug 20 '17 at 09:36

Capture route change events in the following manner...

import { Component, OnInit, Output, ViewChild } from "@angular/core";
import { Router, NavigationStart, NavigationEnd, Event as NavigationEvent } from '@angular/router';

@Component({
    selector: "my-app",
    templateUrl: "app/app.component.html",
    styleUrls: ["app/app.component.css"]
})
export class AppComponent {

    constructor(private cacheComponentObj: CacheComponent,
        private router: Router) {

        /*  Route event types
            NavigationEnd
            NavigationCancel
            NavigationError
            RoutesRecognized
        */
        router.events.forEach((event: NavigationEvent) => {

            //Before Navigation
            if (event instanceof NavigationStart) {
                switch (event.url) {
                case "/app/home":
                {
                    //Do Work
                    break;
                }
                case "/app/About":
                {
                    //Do Work
                    break;
                }
                }
            }

            //After Navigation
            if (event instanceof NavigationEnd) {
                switch (event.url) {
                case "/app/home":
                {
                    //Do Work
                    break;
                }
                case "/app/About":
                {
                    //Do Work
                    break;
                }
                }
            }
        });
    }
}

Perfect, How can I get exact param.id of url ? – ShibinRagh May 16 '19 at 14:39 — ShibinRagh, May 16 '19 at 14:39

score 9 · Answer 14 · answered Aug 19 '21 at 17:40

9

If you're trying to access the current route while listening to route change:

router.events.pipe(filter(r=>r instanceof NavigationEnd)).subscribe(r=>{
      console.log((r as NavigationEnd).url);
    });

answered Aug 19 '21 at 17:40

Ashique Razak

487
3
8

Dylan Moguilevsky · Answer 15 · 2022-08-05T14:27:38.627

After spending some time searching a solution I have found two updated workarounds for Angular 13.1.1:

First option:

  constructor(private router: Router) {
    router.events.forEach((event) => {
      if (event instanceof NavigationStart) {
        // Your code
        // Use (event.url) to get URL that is being navigated
      }
    });
  }

Second option

 routerSubscription: Subscription | undefined;

 constructor(private router: Router) {}


  ngAfterViewInit(): void {
    this.routerSubscription = this.router.events.subscribe((event) => {
      if (event instanceof NavigationEnd) {
          // Your code
          // Use (event.url) to get URL that is being navigated
      }
    });
  }

Remember to unsubscribe on the destroy cicle

 ngOnDestroy(): void {
    this.routerSubscription?.unsubscribe();
  }

Also pay attention depending on your case if is better to use

event instanceof NavigationStart

or

event instanceof NavigationEnd

score 5 · Answer 16 · answered Oct 31 '18 at 07:22

above most of solutions correct , but i am facing issue this emit multiple times 'Navigation emit' event.when i was change any route this event is triggered. So hear is the complete solution for Angular 6.

import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/filter';    

export class FooComponent implements OnInit, OnDestroy {
   private _routerSub = Subscription.EMPTY;
   constructor(private router: Router){}

   ngOnInit(){
     this._routerSub = this.router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe((value) => {
         //do something with the value
     });
  }

  ngOnDestroy(){
   this._routerSub.unsubscribe();
  }
}

score 4 · Answer 17 · answered Jul 13 '21 at 22:57

Updated answer for those who are using Angular9+, By using Router API provided by @angular/router and listening for route changes

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

    @Component({
      selector: 'my-app',
      templateUrl: './app.component.html',
      styleUrls: [ './app.component.css' ]
    })
    export class AppComponent  {
      
      name = 'Get Current Url Route Demo';
      currentRoute: string;
     routeSubscription: subscription;
    
      constructor(private router: Router){
        console.log(router.url);
        
        this.routeSubscription = router.events.filter(event => event instanceof NavigationEnd)
              .subscribe(event => 
               {
                  this.currentRoute = event.url;          
                  console.log(event);
               });
        }
    }

score 3 · Answer 18 · answered May 19 '20 at 14:42

3

I would write something like this:

ngOnInit() {
this.routed = this.router.events.map( event => event instanceof NavigationStart )
  .subscribe(() => {
  } );
}

ngOnDestroy() {
this.routed.unsubscribe();
}

answered May 19 '20 at 14:42

LalithSwarna

101
1
4

score 2 · Answer 19 · answered Dec 01 '21 at 13:58

In Angular 7, I have solved using the below function for enabling and disabling the navbar on specific pages.

First you should import NavigationEnd

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

navbar.component.ts

public isNavbar=false;
ngAfterViewInit() {

    // nabar enable / disable function
    this.router.events.subscribe((event) => {
        if (event instanceof NavigationEnd) {   
            if(event.url.includes('dashboard')){
                this.isNavbar=true;
              }else{
                this.isNavbar=false;
              }
        }
    });
}

navbar.component.html

<mat-toolbar *ngIf="isNavbar" class="mat-elevation-z1 nav-tool-bar">
<button mat-button routerLink="/dashboard" routerLinkActive="active-list-item"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="paper-plane" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="nav-bar-icon svg-inline--fa fa-paper-plane fa-w-16"><path fill="currentColor" d="M464 4.3L16 262.7C-7 276-4.7 309.9 19.8 320L160 378v102c0 30.2 37.8 43.3 56.7 20.3l60.7-73.8 126.4 52.2c19.1 7.9 40.7-4.2 43.8-24.7l64-417.1C515.7 10.2 487-9 464 4.3zM192 480v-88.8l54.5 22.5L192 480zm224-30.9l-206.2-85.2 199.5-235.8c4.8-5.6-2.9-13.2-8.5-8.4L145.5 337.3 32 290.5 480 32l-64 417.1z" class=""></path></svg>
    Campagnes</button>
<button mat-button routerLink="fake" routerLinkActive="active-list-item"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="box-open" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 608 512" class="nav-bar-icon svg-inline--fa fa-box-open fa-w-19"><path fill="currentColor" d="M606.4 143.8L557.5 41c-2.7-5.6-8.1-9-13.9-9C543 32 304 64 304 64S65 32 64.4 32c-5.8 0-11.2 3.5-13.9 9L1.6 143.8c-4.4 9.2.3 20.2 9.6 23l49.5 14.9V393c0 14.7 9.5 27.5 23 31l205.4 54.1c13 3.4 23.7 1.5 29.5 0L524.2 424c13.5-3.6 23-16.4 23-31V181.7l49.5-14.9c9.4-2.8 14-13.8 9.7-23zM73 65.3l180.9 24.3-57.1 99.8-159.9-48.1 36.1-76zm18.2 125.6C208.3 226.1 200.5 224 203.6 224c5.4 0 10.5-2.9 13.3-7.9l71.9-125.5V445L91.2 393V190.9zM516.8 393l-197.6 52V90.5L391.1 216c2.9 5 8 7.9 13.3 7.9 3.1 0-5 2.1 112.4-33.1V393zM411.3 189.3l-57.1-99.8L535 65.3l36.1 76-159.8 48z" class=""></path></svg>
    Ressources</button>
<button mat-button routerLink="fake" routerLinkActive="active-list-item"><svg aria-hidden="true" focusable="false" data-prefix="fal" data-icon="life-ring" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="nav-bar-icon svg-inline--fa fa-life-ring fa-w-16"><path fill="currentColor" d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm168.766 113.176l-62.885 62.885a128.711 128.711 0 0 0-33.941-33.941l62.885-62.885a217.323 217.323 0 0 1 33.941 33.941zM256 352c-52.935 0-96-43.065-96-96s43.065-96 96-96 96 43.065 96 96-43.065 96-96 96zM363.952 68.853l-66.14 66.14c-26.99-9.325-56.618-9.33-83.624 0l-66.139-66.14c66.716-38.524 149.23-38.499 215.903 0zM121.176 87.234l62.885 62.885a128.711 128.711 0 0 0-33.941 33.941l-62.885-62.885a217.323 217.323 0 0 1 33.941-33.941zm-52.323 60.814l66.139 66.14c-9.325 26.99-9.33 56.618 0 83.624l-66.139 66.14c-38.523-66.715-38.5-149.229 0-215.904zm18.381 242.776l62.885-62.885a128.711 128.711 0 0 0 33.941 33.941l-62.885 62.885a217.366 217.366 0 0 1-33.941-33.941zm60.814 52.323l66.139-66.14c26.99 9.325 56.618 9.33 83.624 0l66.14 66.14c-66.716 38.524-149.23 38.499-215.903 0zm242.776-18.381l-62.885-62.885a128.711 128.711 0 0 0 33.941-33.941l62.885 62.885a217.323 217.323 0 0 1-33.941 33.941zm52.323-60.814l-66.14-66.14c9.325-26.99 9.33-56.618 0-83.624l66.14-66.14c38.523 66.715 38.5 149.229 0 215.904z" class=""></path></svg>Support</button></mat-toolbar>

navbar.component.scss

.mat-toolbar {
    padding-top: 2px;
    padding-left: 30px;
    background-color: #fff;
  }
  ::ng-deep .nav-tool-bar{
    button{
     .mat-button-focus-overlay{
       opacity: 0!important;
     }
     .nav-bar-icon{
       width: 16px;
     }
     span{
      font-size: 15px;
     }
    }
    .active-list-item{
        background-color: #c79652;
        span{
          color: #fff;
          font-size: 15px;
          svg{
            path{
              color: #fff;
            }
          }
        }
    }
  }

Important to changes SCSS .active-list-item background color.

score 2 · Answer 20 · answered Nov 22 '22 at 16:57

this.router.events.subscribe((event) => {
  if (event instanceof NavigationStart) {
    this.showProgressBar = true
  } else if (event instanceof NavigationEnd) {
    this.showProgressBar = false
  }
  else if (event instanceof NavigationCancel) {
    this.showProgressBar = false
  }
})

You can subscribe in any event route state

score 1 · Answer 21 · answered Jan 05 '17 at 10:25

1

@Ludohen answer is great, but in case you don't want to use instanceof use the following

this.router.events.subscribe(event => {
  if(event.constructor.name === "NavigationStart") {
    // do something...
  }
});

with this way you can check the current event name as a string and if the event occurred you can do what you planned your function to do.

answered Jan 05 '17 at 10:25

Khaled Al-Ansari

3,910
2
24
27

4

why not use typescript safety? – Pascal Jan 05 '17 at 22:03
@Pascal why the hate? and the `Event` type is causing an error in Atom that's why I didn't used it – Khaled Al-Ansari Jan 05 '17 at 22:08
1

there is no hate just vote down! thats an atom problem. – Pascal Jan 05 '17 at 22:10
2

@Pascal no it's an Angular problem since the router event is not the same as the browser event and that's why the Event type won't work! they need to create a new interface for this event, I should've said that from the beginning but the unreasonable down vote didn't help :) – Khaled Al-Ansari Jan 06 '17 at 13:51
5

since minification is performed in production code you should rather use `instanceOf` so your example will work in production code too. `if(event instanceOf NavigationStart) {` – Milan Jaric Jan 31 '17 at 15:02
1

Should be `if(event instanceof NavigationStart)` – Ketan Jun 26 '17 at 21:12

score 1 · Answer 22 · answered Oct 06 '18 at 10:41

I am working with angular5 application and i'm facing the same issue . when i go through Angular Documentation they provide best solution for handling router events.check following documentation.

Router Events in Angular Route events in angular5
But specifically for the case provide in question we need NavigationEnd Event

Navigation End Event Angular

Represents an event triggered when a navigation ends successfully

How to use this ?

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRouteSnapshot, NavigationEnd } from '@angular/router';
@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {
    constructor(private router: Router) { }
    ngOnInit(): void {
        //calls this method when navigation ends
        this.router.events.subscribe(event => {
            if (event instanceof NavigationEnd) {
                //calls this stuff when navigation ends
                console.log("Event generated");
            }
        });
    }
}

When to use this ?

In my case my application share common dashboard for all users such as users , Admins , but i need to show and hides some navbar options as per user types.

That's why whenever url changes i need to call service method which returns logged in user information as per response i will go for further operations.

score 0 · Answer 23 · edited Nov 05 '15 at 10:30

The following KIND of works and may do the tricky for you.

// in constructor of your app.ts with router and auth services injected
router.subscribe(path => {
    if (!authService.isAuthorised(path)) //whatever your auth service needs
        router.navigate(['/Login']);
    });

Unfortunately this redirects later in the routing process than I'd like. The onActivate() of the original target component is called before the redirect.

There is a @CanActivate decorator you can use on the target component but this is a) not centralised and b) does not benefit from injected services.

It would be great if anyone can suggest a better way of centrally authorising a route before it is committed. I'm sure there must be a better way.

This is my current code (How would I change it to listen to the route change?):

import {Component, View, bootstrap, bind, provide} from 'angular2/angular2';
import {ROUTER_BINDINGS, RouterOutlet, RouteConfig, RouterLink, ROUTER_PROVIDERS, APP_BASE_HREF} from 'angular2/router';    
import {Location, LocationStrategy, HashLocationStrategy} from 'angular2/router';

import { Todo } from './components/todo/todo';
import { About } from './components/about/about';

@Component({
    selector: 'app'
})

@View({
    template: `
        <div class="container">
            <nav>
                <ul>
                    <li><a [router-link]="['/Home']">Todo</a></li>
                    <li><a [router-link]="['/About']">About</a></li>
                </ul>
            </nav>
            <router-outlet></router-outlet>
        </div>
    `,
    directives: [RouterOutlet, RouterLink]
})

@RouteConfig([
    { path: '/', redirectTo: '/home' },
    { path: '/home', component: Todo, as: 'Home' },
    { path: '/about', component: About, as: 'About' }
])

class AppComponent {    
    constructor(location: Location){
        location.go('/');
    }    
}    
bootstrap(AppComponent, [ROUTER_PROVIDERS, provide(APP_BASE_HREF, {useValue: '/'})]);

I've seen folks extend the routerOutlet to add their auth code which is one way. There's talk on gitHub about it but no conclusion yet.. Here's Auth0's way: https://auth0.com/blog/2015/05/14/creating-your-first-real-world-angular-2-app-from-authentication-to-calling-an-api-and-everything-in-between/ — Dennis Smolek, Nov 05 '15 at 00:07
Thank you for your response. Do you know any good videos for learning the authService for angular 2? — AngularM, Nov 05 '15 at 09:11

score 0 · Answer 24 · answered Aug 25 '16 at 13:14

0

I do it like this since RC 5

this.router.events
  .map( event => event instanceof NavigationStart )
  .subscribe( () => {
    // TODO
  } );

answered Aug 25 '16 at 13:14

jirig

551
6
21

score 0 · Answer 25 · answered Feb 25 '21 at 17:18

The cleaner way to do this would be to inherit RouteAware and implement the onNavigationEnd() method.

It's part of a library called @bespunky/angular-zen.

npm install @bespunky/angular-zen
Make your AppComponent extend RouteAware and add an onNavigationEnd() method.

import { Component     } from '@angular/core';
import { NavigationEnd } from '@angular/router';
import { RouteAware    } from '@bespunky/angular-zen/router-x';

@Component({
    selector   : 'app-root',
    templateUrl: './app.component.html',
    styleUrls  : ['./app.component.css']
})
export class AppComponent extends RouteAware
{    
    protected onNavigationEnd(event: NavigationEnd): void
    {
        // Handle authentication...
    }
}

RouteAware has other benefits such as:
✨ Any router event can have a handler method (Angular's supported router events).
✨ Use this.router to access the router
✨ Use this.route to access the activated route
✨ Use this.componentBus to access the RouterOutletComponentBus service

score 0 · Answer 26 · answered Mar 23 '21 at 19:18

0

im using this way:

class ClassName {
  constructor(private router: Router) {
    router.events.subscribe((value) => {
        // see this 
        console.log(value instanceof NavigationEnd) 
    });
  }
}

answered Mar 23 '21 at 19:18

Naeem Bashir

1,937
20
17

score 0 · Answer 27 · answered Oct 27 '21 at 19:20

if you just want to check route/query paramater changes like localhost:4200/users/1?edit=1 to localhost:4200/users/2?edit=0 you can use params observable like below.

import { ActivatedRoute, Params } from '@angular/router';
export class SomeClass implements OnInit {

paramFromRoute;

constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.paramFromRoute = this.route.snapshot.params['paramName']; // this one is required for getting it first time

  this.route.params.subscribe((params:Params)=>{
    this.paramFromRoute =  params['paramName'] // whenever route is changed, this function will triggered.
  });
  // for queryParams you can subscribe to this.route.queryParams
 }   
}

Akshay Mondal · Answer 28 · 2022-06-22T09:28:19.400

0

You can use the following to detect the route change:

import { Router, ActivatedRoute} from '@angular/router';

constructor(private route: ActivatedRoute) {}        

this.router.events.subscribe((event) => {
        if(event) {
            //do something
        }
    });

edited Jun 22 '22 at 09:28

answered Jun 22 '22 at 09:16

Akshay Mondal

60
4

This is unnecessarily confusing. You are importing ActivatedRoute and using it in the constructor, but then the `route` isn't used. And property 'events' does not exist on type 'ActivatedRoute'. So basicaly you suggest using `router.events` just like older answers… – R3gi Nov 01 '22 at 11:47

score 0 · Answer 29 · answered Jun 13 '23 at 08:29

You do no need to know when route changes in order to protect a route(which is the final goal ).

Angular gives you the CanActivate interface you need to create an auhtguard and asign it to the needed routes that have to be protected

https://angular.io/api/router/CanActivate

score -1 · Answer 30 · answered Nov 30 '18 at 04:33

-1

Just make changes on AppRoutingModule like

@NgModule({
imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
  exports: [RouterModule]
})

answered Nov 30 '18 at 04:33

Pullat Junaid

3,224
3
25
25

score -1 · Answer 31 · answered Nov 08 '19 at 08:39

Angular 8. Check whether the current route is the base route.

  baseroute: boolean;
  constructor(
    private router: Router,
  ) {
    router.events.subscribe((val: any) => {
      if (val.url == "/") {
        this.baseroute = true;
      } else {
        this.baseroute = false;
      }
    });
  }

score -5 · Answer 32 · answered Dec 17 '19 at 12:05

-5

simple answer for Angular 8.*

constructor(private route:ActivatedRoute) {
  console.log(route);
}

answered Dec 17 '19 at 12:05

er-Chaan

1
1

1

Isn't this only executed on instantiation, that would be: only once!? This is not a solution. – Satria Dec 19 '19 at 08:55

How to detect a route change in Angular?

32 Answers32

You can subscribe in any event route state

Linked

Related