How to reload current route in angular 2

Most of the time we need to reload current URL with angular 2 but as there is no option so there are some tips to do that. So let’s start we will check one by one.

Reload current route with some dummy parameter

refresh(){
  this.router.navigate(["/same/route/path?refresh=1"]);
}

So now you can update refresh query parameter value and subscribe it in following way.

this.route.queryParams.subscribe((data) => {
      if (data && data['refresh']) {
          console.log('here can start your work and call init method');
      }
    });   

So if your all work start from init method then that would be easy to call again init method. So here actually route is not reload you just got an event by this you trigger init method again.

Pros: You call init method and things are done.
Cons: if your route using Reslover then how will Resolver data update? For this we are using next below trick :).

Reload current route with some dummy route

I prefer this way because by this all route will reload and thinks done automatically and in all project, you can use this thing and no worry about reload route. So basically, we need to create a blank component and set a route for this like below

    {
        path: 'blank',
        component:BlankComponent
    },

So now like I want to refresh my route then I will subscribe this route and when it will come this subscribe callback I will navigate to current URL and it will run. So first it goes to blank route and then come to this route so all things reset according to current route :)

   this.router.navigateByUrl('blank').then(() => {
          this.router.navigateByUrl('same/route/path`);
          console.log('naviate to any route which you want');
    });

for any query, please comment or feedback me for this blog, how do you like this.