How to run a function when a route changes in angular?

Question

I want to change a certain heading according to the current url in Angular. So component.ts looks like this:

import {Router} from '@angular/router';
//code
public name: string
constructor(
    public router: Router
  ) {}
getName()
{
if(this.router.url === "/some_list")
{this.name = "List"}
else if(this.router.url === "/detail")
{this.name = "Detail"}
}

And then

<a>{{this.name}}</a>

The existing answers, like How to detect a route change in Angular? could not tell me how to do something after a change in routing (change = true or false). So how can I run this function whenever the url changes, so that the heading is according to the current view?

Refer this one https://angular.io/api/router/CanActivate – hrdkisback Dec 16 '19 at 09:49 — hrdkisback, Dec 16 '19 at 09:49

Surjeet Bhadauriya · Accepted Answer · 2019-12-16T09:56:51.370

11

You can subscribe to router event in the app.component.ts. It will fire every time you change the route.

  constructor(location: Location, router: Router) {
    // decide what to do when this event is triggered.
    router.events.subscribe(val => {
      if (location.path() != "/something") {
          // do something
      } else {
         // do something else
      }
    });
  }

Try this if it is calling multiple times

router.events.filter(event => event instanceof NavigationEnd).subscribe(val => { // here your code... })

Note: I have not tried this

edited Dec 16 '19 at 09:56

answered Dec 16 '19 at 09:51

Surjeet Bhadauriya

5,825
3
31
47

This will get called multiple times for all the different events. Check log. – Plochie Dec 16 '19 at 09:53

score 6 · Answer 2 · answered Dec 16 '19 at 10:00

Go this StackBlitz link

On every navigation start event of router you can get url and fire function. in you app.component.ts

ngOnInit(){
   this.router.events.subscribe(event =>{
      if (event instanceof NavigationStart){
         console.log(event.url)
         this.routerChangeMethod(event.url);
      }
   })
}

routerChangeMethod(url){
  this.title = url;
}

Yout app.component.html is..

{{title}}

<router-outlet></router-outlet>

score 2 · Answer 3 · answered Dec 16 '19 at 10:01

2

As a good practice you should have one component per route.

RouterModule.forRoot([
    { path: 'products', component: DetailComponent },
    { path: 'shopping-cart', component: SomelistComponent }
])

If you keep to this practice, then you will have a separation of concern.

And then according to the route you just set header for your component.

You can read more about routing here.

answered Dec 16 '19 at 10:01

StepUp

30,747
12
76
133

1

I totally agree - I have already one component per rule, but I have an extra component for the contenttab to navigate between these components - and for a special use cas of this contenttabs I need the headings – Dec 16 '19 at 11:32

score 2 · Answer 4 · answered Dec 16 '19 at 10:01

2

Try like this:

Working Demo

.html

<a routerLinkActive="active" routerLink="/some_list">Home</a> |
<a routerLinkActive="active" routerLink="/detail">Catalog</a>

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

.ts

getName() {
  if (this.router.url.includes("some_list")) {
      this.name = "some_list";
  } else if (this.router.url.includes("detail")) {
      this.name = "detail";
  }
  alert(this.name);
}

answered Dec 16 '19 at 10:01

Adrita Sharma

19,704
10
55
71

I think I read that its bad practice to use methods in the markup. These methods will be called a lot of times during the render phases. Check answer from GaurangDhorda below instead – Jens Alenius Oct 28 '20 at 11:57

How to run a function when a route changes in angular?

4 Answers4