title: Stop a continuous function being called once I leave the component in Angular
body: <p>I am building an app using Angular. As part of it, I am making an API call every 1 min for continuous data. My code looks like.</p>
  
  <pre><code>ngOnInit() {
      this.getRealTimeData();
    }
  
    intervalId : any
  
    getRealTimeData() {
      this.getChillerApiData()
      clearInterval(this.intervalId);
      this.intervalId = setInterval(() =&gt; {
        this.getChillerApiData();
      }, 1000);
    }
  
    getChillerApiData() {
      this.api.getFirstChillerData()
        .subscribe((first_data:any) =&gt; {
          this.first_api_data = first_data;
          console.log(this.first_api_data)
          this.putPrimaryPumpData();
        });
    }
  </code></pre>
  
  <p>I am getting data every 1 min or whatever time interval I mention. But what is happening is when I leave the component and go on to another component, still I see API calls made regularly at specified interval (I can see the console logs). How do I stop that from happening? I mean once I leave this component API calls should also stop. </p>