Angular auto refesh in time intervals

Question

In my Angular2 application there are two components for form view and graph view. In the form, there is a spinner and checkbox for auto refresh handle.

Form Component html

<div class="refresh-spinner">
      <my-checkbox
        [selected]=autoRefresh
        [disabled]="false"
        [id]="'autoRefresh'"
        [name]="'Auto Refresh Every'"
        [code]="'autoRefresh'"
        (status)="checkAutoRefresh($event)">
      </my-checkbox>
      <my-spinner [title]="''"
                  [category]="'duration'"
                  [maxCount]=maxRefreshTime
                  [minCount]=minRefreshTime
                  [value]=minRefreshTime //default refresh value is 1 min
                  [editable]="true"
                  (count)="getAutoRefreshInterval($event)">
      </my-spinner>
      <span class="post__text"> Mins</span>
    </div>

Form Component ts

// form view emits selected criteria
@Output() criteria = new EventEmitter<any>();

checkAutoRefresh(ele) {
   this.autoRefresh = ele.selected;
   localStorage.setItem('autoRefresh', ele.selected);
}

getAutoRefreshInterval(interval) {
   localStorage.setItem('refreshInterval', interval.value);
}

Refresh interval and checkbox value (autoRefresh true/fasle) are set is local storage on spinner event and checkbox select event.

Graph components ts

alive: boolean; // used to unsubscribe from the IntervalObservable when OnDestroy is called.

@Input() criteria: FilteringCriteria;

constructor(private element: ElementRef, private myService: MyService) {
    this.alive = true;
 }

 ngOnInit() {
    let interval: number = JSON.parse(localStorage.getItem('refreshInterval'));
   console.log(Date());
   this.getStatistics();

   IntervalObservable.create(interval * 60 * 1000)
  .takeWhile(() => this.alive)
  .subscribe((e) => {
    // console.log(e)
    if (JSON.parse(localStorage.getItem('autoRefresh'))) {
      console.log(Date());
      this.getStatistics();
    }
  });
  }

 ngOnDestroy() {
   this.alive = false;
 }

These form view and graph view are used in main component as below.

<search-criteria (criteria)="emitCriteria($event)"></search-criteria> //filteringCriteria emits from here

<ng-template ngFor let-result [ngForOf]="servers" let-i="index">
    <my-grid-item row [class]="'graph--view'"
                    [colspan]="4">
      <graph-view [criteria]="filteringCriteria"></graph-view>
    </my-grid-item>
</ng-template>

Two Questions:

1. Once I check auto refresh checkbox graphs are refresh in 1 minute. But time interval is calculating from the time component is initialized not from the time the checkbox is selected.

2 If I change the value of the spinner (from 1 min to 2 min) local storage value is changed to new value 2. But graphs are refreshing in 1 min time intervals. But if I hit on form done button, then the graphs are refreshing in new time interval(2 min).

Any suggestions are appreciated.

Thank You!

score 1 · Accepted Answer · answered Mar 21 '18 at 06:09

It is happening because you are initializing the Observable as part of the init process of the graph component. So the time is taken from the moment it is initialized and when you update the interval it does not know about that and keeps using the one with which it was initialized.

You can declare a variable to hold the subscription and move all your code to subscribe to a different method. Something like

subscription;

constructor(private element: ElementRef, private myService: MyService) {
}

ngOnInit() {
    this.getThreadPoolStatistics();
    this.autoUpdateInit();
    // subscribe to autoRefresh and interval changes
    // autoRefreshChange.subscribe( () => this.autoUpdateInit());
    // intervalChange.subscribe( () => this.autoUpdateInit());
}

autoUpdateInit(){
    let interval: number = JSON.parse(localStorage.getItem('refreshInterval'));
   console.log(Date());
    // remove the old subscription
   if(subscription) {
       subscription.unsubscribe();
       subscription = null;
   }
   // create one only when you need it. check for autorefresh and alive?
   if(<subscription required>){
       subscription = IntervalObservable.create(interval * 60 * 1000)
      .subscribe((e) => {
          // console.log(e)
          if (JSON.parse(localStorage.getItem('autoRefresh'))) {
            console.log(Date());
            this.getStatistics();
          }
       });
   }
}

You have to make sure, your Graph component gets the updates to the autorefresh and interval and call the autoUpdateInit again to make sure it updates the IntervalObservable. You can use a service to make sure both the components are looking at the same values as per this answer. If they are having a parent-child relation, then you can emit the changes via the @Output.

You need to replace that part with your condition when you need a subscription e.g. when autorefresh is true and may be depending upon your alive varaible — GSSwain, Mar 21 '18 at 07:37

Angular auto refesh in time intervals

1 Answers1