-2

I noticed that if you are a specific path, and the user clicks on a button that is supposed to bring to the user to that path, angular does not do anything. Basically, that button appears to be as not working at that moment.

You need to go to a different route in order for that button to work again.

I do not want to jump the gun and do something heavy like window.locaton.href the old school way.

Hence the question:

Is there a way to force the reload of the current route in angular?

Average Joe
  • 4,521
  • 9
  • 53
  • 81
  • 2
    Possible duplicate of [How to reload the current route with the angular 2 router](https://stackoverflow.com/questions/40983055/how-to-reload-the-current-route-with-the-angular-2-router) – Jota.Toledo Jan 28 '18 at 11:59
  • I was able to solve this by that dup link you posted. That helped big time. Sometimes, googling does not work for me. For example, I did not see that answer earlier. – Average Joe Jan 28 '18 at 17:23

1 Answers1

0

Ok friends, this is how you do it.

Notice the ?navID={{navID}} and the (click)="generateNavID()" in the Button-HTML snippet below. That's the .html part of the trick.

<button type="button" mat-icon-button routerLink="whatever-your-path-is?navID={{navID}}" (click)="generateNavID()" >click me</button>

For the .ts part, just do something like this and call it a home-run!

...

export class whatever   {

  ... 

  navID: number;

  ...

  generateNavID() {
     this.navID = Math.random();
  }

}

If there is anyone among you who can turn this into a one file operation, please feel free to improve this answer. It would be so much better to eliminate the need of requiring the typeScript file.

For example, the following would have been superior if it were to work:

<button type="button" mat-icon-button routerLink="whatever-your-path-is?navID={{Math.random}}" >click me</button>

This approach would not even require the need for the (click) event, neither. But, it won't work. Maybe you know of a practical way.

Average Joe
  • 4,521
  • 9
  • 53
  • 81
  • 1
    The entire premise of this question is wrong. If the route doesn't change, the component is responsible for state change. If only route params changed, just design the component correctly and react to changes instead of requiring a reload. – Ingo Bürk Jan 28 '18 at 17:23
  • Ingo, +1 for catching that. But this is a very useful piece of hack and it does come handy from time to time. In my case, the page has a search form on the left pane, upon clicking on the various checkboxes on the form, the form submits and the right pane gets populated by the results. Meanwhile, the link ( the magnifier icon ) that brought the user to the search form is still there at the top, at a visible location cause it is part of the header. (more on the next comment. ) – Average Joe Jan 28 '18 at 17:30
  • It's totally normal to expect user's to click on that magnifier icon to initiate a new search. Users are users and you cannot force them. You basically accommodate. This solution saves the day! But of course, if you got plenty of time in your hands, you can re-do the entire code and get the premise right. – Average Joe Jan 28 '18 at 17:30
  • Not sure, what you mean by `having to reload a route to bypass the Angular component reuse mechanism` and also what is involved about the alternative way to the hack? – Average Joe Jan 28 '18 at 17:35
  • It sounds to me like submitting a search should change the route params (like adding the values of those checkboxes). Then starting a new search involves changing route params again. I don't see hue need to reload a component which Angular reuses. – Ingo Bürk Jan 28 '18 at 17:39