title: Angular2/4 : Refresh Data Realtime
body: <p>I need to refresh the data in a component page in an interval. Also I need to refresh the data after doing some action. I am using Obeservables in the service so that I can subscribe to when the response is ready. I am pushing the subscriptions to a object so that I can clear that on <code>ngDestroy</code>, I think, I have the following methods to achieve the same.</p>
  
  <p><strong>Method 1 : setInterval</strong></p>
  
  <p>I have set an interval on <code>ngOnInit</code>, which will call the refreshData in equal interval. The interval object will be cleared using <code>clearInterval</code> in <code>ngOnDestroy</code> method.</p>
  
  <pre><code>export class MyComponent implements OnInit, OnDestroy {
      private subscription: Subscription = new Subscription();
  
      data: any;
      interval: any;
  
      ngOnInit() {
          this.refreshData();
          this.interval = setInterval(() =&gt; { 
              this.refreshData(); 
          }, 5000);
      }
  
      ngOnDestroy() {
          this.subscription.unsubscribe();
          clearInterval(this.interval);
      }
  
      refreshData(){
          this.subscription.add(
              this.myService.getData()
                  .subscribe(data =&gt; {
                      this.data = data;
                  })
          );
      }
  
      doAction(){
          this.subscription.add(
              this.myService.doAction()
                  .subscribe(result =&gt; {
                      if(result === true){
                          this.refreshData();
                      }
                  })
          );
      }
  }
  </code></pre>
  
  <p>Q1 : On each refresh call a subscription will be added to the <code>subscription</code> object, will that increase the memory usage and may crash the browser if user keeps the page opened for a while?</p>
  
  <p><strong>Method2 : Observable.timer</strong></p>
  
  <p>This method is using a timer which will created after the data is refreshed. </p>
  
  <pre><code>export class MyComponent implements OnInit, OnDestroy {
      private subscription: Subscription = new Subscription();
  
      data: any;
  
      ngOnInit() {
          this.refreshData();
      }
  
      ngOnDestroy() {
          this.subscription.unsubscribe();
      }
  
      refreshData(){
          this.subscription.add(
              this.myService.getData()
                  .subscribe(data =&gt; {
                      this.data = data;
                      this.subscribeToData();
                  })
          );
      }
  
      subscribeToData(){
          this.subscription.add(
              Observable.timer(10000).subscribe(() =&gt; this.refreshData())
          );
      }
  
      doAction(){
          this.subscription.add(
              this.myService.doAction()
                  .subscribe(result =&gt; {
                      if(result === true){
                          this.refreshData();
                      }
                  })
          );
      }
  }
  </code></pre>
  
  <p>Q2 : I have the same question(Q1) here. This way, will add the timers also to the subscription object, so infact the subscriptions in the subscription object is doubled.</p>
  
  <p>Q3 : To refresh data after the action method - doAction(), the refreshData is called. So will that create another chain of timer?</p>
  
  <p>Q4 : Which is the better way without memory leaks or if there exists any other way?</p>