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.
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.
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 */}
});
}