How to call a function on every route change in angular2

Question

My module.ts,

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule,Router }   from '@angular/router';
import { AppComponent }  from './crud/app.component';
import { Profile }  from './profile/profile';
import { Mainapp }  from './demo.app';
import { Navbar }  from './header/header';
// import {ToasterModule, ToasterService} from 'angular2-toaster';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({

  imports:      [ BrowserModule,FormsModule, ReactiveFormsModule ,
  RouterModule.forRoot([
      { path: '', component:AppComponent},
      { path: 'login', component:AppComponent},
      { path: 'profile', component:Profile}
    ]) ],
  declarations: [ AppComponent,Mainapp,Navbar,Profile ],
  bootstrap:    [ Mainapp ]
})
export class AppModule { 

}

Here i want to call a function from main.ts on every route change and how can i do that.Can anyone please help me.Thanks. My mainapp.ts,

    export class Mainapp {

    showBeforeLogin:any = true;
    showAfterLogin:any;
    constructor( public router: Router) {
     this.changeOfRoutes();

     }
     changeOfRoutes(){
      if(this.router.url === '/'){
         this.showAfterLogin = true;
      }
     }
}

I want to call this changeofRoutes() for every route change and how can i do that?Can anyone please help me.

it is not advisable, what your are going to do in that method — Aravind, Feb 25 '17 at 08:00
may be this can help you http://stackoverflow.com/a/33548895/2036977 — Vinay Pandya, Feb 25 '17 at 11:03

score 75 · Accepted Answer · edited Jun 20 '20 at 09:12

75

you can call activate method from main router-outlet like this

<router-outlet  (activate)="changeOfRoutes()"></router-outlet>

which will call every time when route will change.

Update -

Another way to achieve the same is to subscribe to the router events even you can filter them out on the basis of navigation state may be start and end or so, for example -

import { Router, NavigationEnd } from '@angular/router';
  
  @Component({...})
  constructor(private router: Router) {
    this.router.events.subscribe((ev) => {
      if (ev instanceof NavigationEnd) { /* Your code goes here on every router change */}
    });
  }

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 25 '17 at 07:55

Pardeep Jain

84,110
37
165
215

2

Hi pradeep,its worked greately but its not getting called when I click on back button in my browser. – Daniel Feb 25 '17 at 08:31
i have't tested this so far, so can't say anything – Pardeep Jain Feb 25 '17 at 08:48
1

Ok but your answer help me a lot.Thanks. – Daniel Feb 25 '17 at 09:13
Hey Pradeep,can you answer my question? – Daniel Feb 25 '17 at 11:42
2

It is working for browser back button also. I have tested this in chrome, mozilla and IE @Daniel – Gobind Gupta Nov 24 '18 at 11:43
@Daniel Yes sure, what's your question! – Pardeep Jain Nov 24 '18 at 11:53
what if I have multiple outlets ? – Kishan Oza Mar 15 '19 at 10:16
@KishanOza check my updated answer for another way to test. – Pardeep Jain Mar 15 '19 at 19:44

score 6 · Answer 2 · answered Feb 25 '17 at 08:21

You can subscribe to the NavigationEnd event of router, and retrieve the URL with urlAfterRedirects method.

I strongly recommend you to use the urlAfterRedirects, because it seems that you need to showAfterLogin conditionally.
Let's say, you're redirecting /test-page to /; and you rely on router.url. In that case the app will already be redirected to / but router.url would return /test-page and here the issue comes ('/test-page' != '/').

Simply, make the following changes in your constructor:

export class Mainapp {
    showBeforeLogin:any = true;
    showAfterLogin:any;

    constructor(public router: Router) {
        this.changeOfRoutes();

        this.router.events
            .filter(event => (event instanceof NavigationEnd))
                .subscribe((routeData: any) => {
                    if(routeData.urlAfterRedirects === '/') {
                        this.showAfterLogin = true;
                    }
                });
    }
}

the `filter` method depends on `rxjs`. Simply, `import 'rxjs/add/operator/filter';` add this import at the beginning of your TS file, should work without a problem. — Burak Tasci, Feb 25 '17 at 08:31

score 5 · Answer 3 · answered Mar 16 '18 at 05:37

You can call directive in Routes like below:

{ path: 'dashboard', component: DashboardComponent , canActivate: [AuthGuard] },

Your AuthGuard component is like below where you put your code:

auth.guard.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, 
RouterStateSnapshot } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {

constructor(private router: Router) { }

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) 
{
    if (localStorage.getItem('currentUser')) {
        // logged in so return true
        return true;
    }

    // not logged in so redirect to login page with the return url
    this.router.navigate(['/home'], { queryParams: { returnUrl: 
 state.url }});
    return false;
  }
 }

You should import AuthGuard component in app.module.ts file and should provide in providers:

app.module.ts:

......... Your code.......... 
import { AuthGuard } from './_guards/index';
..........Your code..............
  providers: [
    AuthGuard,
    ........
],

score 0 · Answer 4 · answered Dec 06 '18 at 14:07

0

You can refer:NgRx Router

Catch all 'Go' actions in ngrx effects to do things just before the route changes, or in the reducer of this action to call a function after the route changes.

answered Dec 06 '18 at 14:07

Krishna Ganeriwal

1,903
19
17

How to call a function on every route change in angular2

4 Answers4

Update -

Linked