117

How can I reload the current page on Angular 2?

if iam in page 2 (pagination) and refresh the page it will show page 1(URL pageload) but i want i refresh the page 2 and it will appear in page 2

Community
  • 1
  • 1
FABI1987
  • 1,179
  • 2
  • 7
  • 3
  • What do you want to achieve by reloading? May be there are alternate ways to achieve the same? – Madhu Ranjan May 15 '17 at 17:59
  • @MadhuRanjan i want to reset all the model but not value after value, – FABI1987 May 15 '17 at 18:01
  • you may have all model fetch functions in a common method and call it when ever needed. – Madhu Ranjan May 15 '17 at 18:10
  • @MadhuRanjan is it impassable to repload page simlpy? – FABI1987 May 15 '17 at 18:46
  • sure can, you can use `window.location.reload()` like in below answer, But it defies the purpose of SPA, Cheers!! – Madhu Ranjan May 15 '17 at 18:56
  • @MadhuRanjan but it not cross platform way – FABI1987 May 15 '17 at 19:00
  • what platform you are targeting? It is supported in all major Browsers, IE\Edge\Chrome\Firefox\Safari. – Madhu Ranjan May 15 '17 at 19:04
  • @MadhuRanjan if i run with chrome on linux windows.location will not work – FABI1987 May 15 '17 at 19:16
  • 2
    usually Browser features work irrespective of platform, if it is available officially for the respective OS. Having said that I would suggest you to create a new SO question regarding how to get around `window.location.reload()` for chrome on Linux, that would be ideal place for getting your answer, and then you may have a check in your code to get the browser version and have a logic around, Cheers!! – Madhu Ranjan May 15 '17 at 19:24
  • 1
    FWIW, my own use case for this is multi-language support, since as of v5.1, Angular still doesn't support it without doing a separate deployment per language. I have a Razor page that decides which Angular script bundle to load, depending on the language preference it gets from the user database of the ASP.NET Core backend. In order to change the language after the user has changed their preferences, reloading just the Angular SPA won't do, I need to reload the entire Razor page to basically have it load a different Angular SPA. – Daniel Saner Dec 18 '17 at 12:56
  • You can call the ngOnInit() method – Marko Rochevski Feb 06 '19 at 14:52

1 Answers1

254

This should technically be achievable using window.location.reload():

HTML:

<button (click)="refresh()">Refresh</button>

TS:

refresh(): void {
    window.location.reload();
}

Update:

Here is a basic StackBlitz example showing the refresh in action. Notice the URL on "/hello" path is retained when window.location.reload() is executed.

Dharman
  • 30,962
  • 25
  • 85
  • 135
Alexander Staroselsky
  • 37,209
  • 15
  • 79
  • 91
  • 8
    i want better way windows.location that not cross platform... – FABI1987 May 15 '17 at 18:20
  • There is no simple cross platform way. You would have to check what platform it is and then do the appropriate reload for that platform. – Joo Beck Jan 16 '18 at 16:25
  • The refresh doesn't work and only brings the user back to the first page. – Ace Jan 21 '18 at 20:00
  • It can depend on how your routing is set up as well as how SPA routes are loaded by the server. `reload()` is a standard browser approach to reloading resources from the current URL. – Alexander Staroselsky Jan 21 '18 at 20:27