Angular5 Refresh only data, not whole application

Question

I have an app in Angular5 and NodeJS and now, when I click F5 on any of my pages, it tooks a loooong time to refresh and sometimes it don't show data. I think it reloads my whole application. There is any way to do "only data refresh" or something like that, so my whole app wouldn't be refreshed every single time I press F5?

Dragas · Answer 1 · 2020-01-20T11:46:34.227

Intercepting expected browser behavior is a bad idea from UX perspective. What should happen if your application crashed or ended up in a state where I cannot go back to previous state? How should I "update" (read: pull the new code) your application? What if I want to discard current state? Personally I'm pretty pissed at websites that change any browser behavior.

You might be interested in https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event though.

score 0 · Answer 2 · answered Jan 20 '20 at 11:48

0

Actually you can add "keydown" event listener to window:

if (event.keyCode === 116) {
      //retrieve data from server
      event.preventDefault();
}

This will stop page refresh on "F5" and perform your custom functionality. But for user it might be strange that "F5" doesn't work as expected.

answered Jan 20 '20 at 11:48

Felix Piskunov

29
3

Maybe you can add routing functionality to reload routed component: https://stackoverflow.com/q/40983055/7885651 – Muhammed Ozdogan Jan 20 '20 at 11:57

score -1 · Answer 3 · answered Jan 20 '20 at 11:54

Thanks guys for all of your support! I've done it using HostListener:

  @HostListener('document:keydown.F5', ['$event'])
  keyEvent(event: KeyboardEvent){
    event.preventDefault();
    this.getData();
  }

Now when somebody clicks F5 on page, it just reloads data (getData function, which gets fresh data from database).

BTW I know that disabling any of browser features is a bad way, but in this special scenario i just need this to work as I want.

What if I'm using the mouse or swipe to refresh? – Dragas Jan 20 '20 at 11:59 — Dragas, Jan 20 '20 at 11:59

Angular5 Refresh only data, not whole application

3 Answers3