refreshing data on page every X seconds for angular component

Question

I need to refresh data of angular component each 30 seconds. I use simple setInterval:

 this.interval = setInterval(() => {
               this.refresh(); // api call
            }, 10000);

However, this is incorrect, because even when I navigate to another "page" (in angular SPA everything is one page, so it is not really another page), refresh is happening each 30 seconds.

What is the correct way to refresh data every 30 seconds only when on specific page/component?

This article will help you : https://stackoverflow.com/questions/44947551/angular2-4-refresh-data-realtime — Joel Joseph, Nov 27 '18 at 07:48

score 9 · Accepted Answer · answered Nov 27 '18 at 07:51

9

You could destroy interval on OnDestroy life cycle hook of the component.

Using clearInterval(this.interval)

ngOnDestroy() {
   if (this.interval) {
     clearInterval(this.interval);
   }
}

answered Nov 27 '18 at 07:51

ptesser

379
4
11

Seems similer answer of mine – Pardeep Jain Nov 27 '18 at 07:52
I know, because we wrote on the same time, more less. – ptesser Nov 27 '18 at 08:02
Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right? – renathy Nov 27 '18 at 08:31
Yes, for the editor you should implements `OnDestroy` and it's the best approach. For the final result you could avoid it because at runtime Javascript lose interfaces declared with Typescript. But the best practice is to insert it. – ptesser Nov 27 '18 at 08:51

Pardeep Jain · Answer 2 · 2018-11-28T05:35:49.693

1

You could clearInterval in ngOnDestroy life cycle hook of component

ngOnDestroy() {
  clearInterval(this.interval);
}

ngOnDestroy will call every time component destroy in digest cycle and it will clear your interval as well (If you do so). Generally used to call logic which we don't require after navigation of current route to another.

edited Nov 28 '18 at 05:35

answered Nov 27 '18 at 07:50

Pardeep Jain

84,110
37
165
215

score 1 · Answer 3 · answered Jan 13 '21 at 09:02

1

try this.

save: boolean = false;
autoSave() {
        setInterval(() => {
            console.log('setTimeOut');
            this.save = true;

        }, 1000);
}

answered Jan 13 '21 at 09:02

Fahimeh Ahmadi

813
8
13

score 0 · Answer 4 · answered Nov 27 '18 at 07:49

0

try this.

routerOnActivate() {
   this.interval = setInterval(() => {
               this.refresh(); // api call
            }, 10000);
}

routerOnDeactivate() {
  clearInterval(this.interval);
}

answered Nov 27 '18 at 07:49

Farhat Zaman

1,339
10
20

lloydaf · Answer 5 · 2018-11-27T07:57:39.157

0

When you navigate to another page, you have to clear the interval you are setting.

this.interval = setInterval(()=>{
  ...
});

navigateToAnotherPage = () => {
  //function to navigate to another page
  clearInterval(this.interval);
  router.navigate(...)//if you are using router to navigate
}

edited Nov 27 '18 at 07:57

answered Nov 27 '18 at 07:51

lloydaf

605
3
17

What is `navigateToAnotherPage` here? when this is being called? – Pardeep Jain Nov 27 '18 at 07:52
Whatever the questioner is using to navigate to another page. Perhaps a function call that navigates using `router.navigate`. Not sure how the navigation is happening as it is not mentioned in the OP. – lloydaf Nov 27 '18 at 07:54
@PardeepJain but yeah I agree with your solution. `ngOnDestroy` seems like a more generic fix. – lloydaf Nov 27 '18 at 07:55
Thanks, but this is not Angular specific so asked. – Pardeep Jain Nov 27 '18 at 07:56

score 0 · Answer 6 · answered Nov 17 '21 at 10:30

You can also leverage reactive style.

import { timer } from 'rxjs';
/*
  timer takes a second argument, how often to emit subsequent values
  in this case we will emit first value after 1 second and subsequent
  values every 2 seconds after
*/
const source = timer(0, 2000);
//output: 0,1,2,3,4,5......
const subscribe = source.subscribe(val => console.log(val));

Reference - https://www.learnrxjs.io/learn-rxjs/operators/creation/timer

refreshing data on page every X seconds for angular component

6 Answers6