I want to reload a route but without reloading the entire page. This is not what I want:

window.location.reload();

I want to reload just the ponent not the page. This is waht I tried:

1. Angular: Change the route without reloading
2. Angular: Refetch data on same URL navigation

Some other random tricks also I tried. Tried following code from this URL:

1. Angular Basics: Refresh an Angular Component without reloading the same Component

   mySubscription: any;
   
   constructor() {
     this.router.routeReuseStrategy.shouldReuseRoute=function() {
       return false;
     }
   
     this.mySubscription= this.router.events.subscribe((event)=> {
       if(event instanceof NavigationEnd) {
           // Trick the Router into believing it's last link wasn't previously loaded
           this.router.navigated=false;
       }
     })
   }
   

But It's not working due to other reasons. I need a solution. Please suggest something else.

I want to reload a route but without reloading the entire page. This is not what I want:

window.location.reload();

I want to reload just the ponent not the page. This is waht I tried:

1. Angular: Change the route without reloading
2. Angular: Refetch data on same URL navigation

Some other random tricks also I tried. Tried following code from this URL:

1. Angular Basics: Refresh an Angular Component without reloading the same Component

   mySubscription: any;
   
   constructor() {
     this.router.routeReuseStrategy.shouldReuseRoute=function() {
       return false;
     }
   
     this.mySubscription= this.router.events.subscribe((event)=> {
       if(event instanceof NavigationEnd) {
           // Trick the Router into believing it's last link wasn't previously loaded
           this.router.navigated=false;
       }
     })
   }
   

But It's not working due to other reasons. I need a solution. Please suggest something else.

• javascript
• angular

• Try invoking the ngOnInit() again – Nicholas K Commented Dec 19, 2020 at 17:23
• 1 @NicholasK, hi sir. When ngOnInit is re-invoked then array is getting cleared. I checked this already this morning. But I should not be doing so I think. I don't have proper explanation to my tech lead – Tanzeel Commented Dec 19, 2020 at 17:28
• Which array is getting cleared? – Nicholas K Commented Dec 19, 2020 at 17:30
• Actually all the problem is ing from here: stackoverflow./questions/65357756/… – Tanzeel Commented Dec 19, 2020 at 17:32

2 Answers 2

the skipLocationChange option works for me，try my service

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';

@Injectable()
export class ReloadRouteService {

  constructor(
    private router: Router,
  ) { }

  redirectTo(url: string): void {
    // When skipLocationChange true, navigates without pushing a new state into history.
    this.router.navigateByUrl('/', {skipLocationChange: true}).then(() => {
        this.router.navigate([url]);
    });
  }
}

What I needed when I searched for this was

runGuardsAndResolvers: 'always'

in the route declaration.

As mentioned in this answer: https://stackoverflow./a/56254921/17183210

Or this Blog: https://medium./engineering-on-the-incline/reloading-current-route-on-click-angular-5-1a1bfc740ab2