title: Unable to stop setInterval() in angular
body: <p>I am using <code>setInterval()</code> in angular to refresh my page but the refreshing  of the page does not stop. I have used <code>clearInterval()</code> as well but it does not seems to work. Please guide and let me know if there is something wrong with the code or is there any other to stop the refreshing.</p>
  
  <p>I used <code>clearInterval()</code> in the <code>ngOnDistroy</code> because it was affecting other 
  components as well. But it also didn't worked.</p>
  
  <p><strong>AppComponent.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  export class AppComponent {
    intervalId;
    i:number=0;
    n:number=0;
  
    ngOninit(){
  
    }
  
    refresh(){
      this.n++;
      alert("**** this is refresh method with "+this.n+" times.****");
      this.intervalId=setInterval(()=&gt;{
        this.i++;
        if(this.i&gt;3){
          console.log("we are in stop method");
          this.stopRefresh();
        }
        this.refresh();
      },60000);
    }
  
    stopRefresh(){
    clearInterval(this.intervalId);}
  
  
  }
  </code></pre>
  
  <p><strong>AppComponent.html</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs-12"&gt;
        &lt;div&gt;
          &lt;button (click)="refresh()"&gt;Test&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I expected the code to stop after the value of variable 'i' reaches 3 but it keeps on going on and never stops.</p>