Angular detect route change only when navigating to a different component

Question

I am trying to do something upon route change (i.e scroll to top) only when navigating to a different component in my application but not when staying on the same component and just changing its view by a route to the same component with different query params

For example, If I am at /products?category=kitchen and I navigate to /products?category=bedroom I don't want the the operation (i.e scroll to top) to perform.

This is the code in my app.component.ts:

this.router.events.pipe(
  filter(event => event instanceof NavigationEnd)
).subscribe((event: NavigationEnd) => {
  // Would like to check here if user navigates to different component
  if (window) window.scrollTo(0, 0);
});

Does anybody know how I can achieve that?

Solution 1

I want to share how I solved this just in case someone will encounter somthing similar in the future:

private componentBeforeNavigation = null;
  private setScrollToTopOnNavigation() {
    // Scroll to top only when navigating to a different component
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      let currentRoute = this.route;
      while (currentRoute.firstChild) currentRoute = currentRoute.firstChild;
      if (this.componentBeforeNavigation !== currentRoute.component) {
        if (window) window.scrollTo(0, 0);
      }
      this.componentBeforeNavigation = currentRoute.component;
    });
  }

What this code is doing is using a private property for the component called componentBeforeNavigation which is initially null and every time the Navigation event is fired, the code in the subscribe check if the place I'm navigating now is the same as the last navigation. If yes, it means it is a navigation to the same component and I don't perform my special action (in this case scroll to top of the window) and if no, it means it is a navigation to a new component.
One important thing is to store the new component that I'm navigating to in the property componentBeforeNavigation so it is always updated with the last navigation

Solution 2

You can subscribe to the ActivatedRoute paramMap to do your stuff:

this.activatedRoute.paramMap.subscribe(paramMap  =>  {
        this.router.navigate('your child route here');
    });

and make sure the category view is a child route of products.

Also in place of products view in html template add a routing placeholder where the child view will be placed:

<router-outlet></router-outlet>

You can read more about nested routing here:

Comments

[yanivps]

Thank you for the suggested answer but the problem with it is that this will allow me to run code only when I route to the same component while I wanted the code to run on every route change except when routing to the same component. Any other suggestions?

[yanivps]

Not quite sure I understood you. Can you edit and provide any pseudo example? Thanks

[Krish]

@yanivps did you resolve the issue, I also have the same

[Krish]

I have replaced the state, but my router.url and activatedroute is not detecting the state change

[Julien Ambos]

A state change differs from a route change. The state is merely a displayname. To notify router.url and activatedRoute you have to do a router.navigate to that location.

[Muhammad Mabrouk]

Worked like a charm! Thanks again for your help 😍