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?

Duleba

This article will help you : #44948051 – Ine

Answer 1

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

Using clearInterval(this.interval)

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

Tubb

Seems similer answer of mine – Gylys

I know, because we wrote on the same time, more less. – Tubb

Btw, you could also mention that component should implement OnDestroy... otherwise ondestroy never called, right? – Duleba

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. – Tubb

Answer 2

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.

Gylys

Answer 3

try this.

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

        }, 1000);
}

Fontanel

Answer 4

try this.

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

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

Stanislaw

Answer 5

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
}

Bathurst

What is navigateToAnotherPage here? when this is being called? – Gylys

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. – Bathurst

@PardeepJain but yeah I agree with your solution. ngOnDestroy seems like a more generic fix. – Bathurst

Thanks, but this is not Angular specific so asked. – Gylys

Answer 6

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

Kansu