title: Trigger (change) of a slider after a few seconds in Angular
body: <p>Using <a href="https://swimlane.github.io/ngx-ui/#slider" rel="nofollow noreferrer">ngx-ui</a> slider for a year range. This is the HTML part:</p>
  
  <pre><code>&lt;ngx-slider 
      [(ngModel)]="globalYearSelection" 
      [step]="1" 
      [filled]="false" 
      [min]="1990" 
      [max]="2015" 
      (change)="onChangeYear($event.value)"&gt;
  &lt;/ngx-slider&gt;
  </code></pre>
  
  <p>And this is my component with the <code>onChangeYear()</code> function:</p>
  
  <pre><code>onChangeYear(value) {
    this.globalYearSelection = value;
    this.getAllChartsData();
  }
  </code></pre>
  
  <p>As you can see, when I change the value of the slider, I update the <code>this.globalYearSelection</code> and then I call a function that has several HTTP requests to get some data.</p>
  
  <p>However, while I change the value of the slider, the <code>this.getAllChartsData()</code> is called multiple times for each step of the slider.</p>
  
  <p>I tried to do it like this:</p>
  
  <pre><code>  onChangeYear(value) {
      this.globalYearSelection = value;
      setTimeout(() =&gt; this.getAllChartsData(), 2000);
    }
  </code></pre>
  
  <p>To be sure that it will trigger the HTTP requests only after 2 seconds, but the result was to wait 2 seconds and then fire all the requests for all the values I slided at once.</p>
  
  <p>I tried also to use <code>(blur)="onChangeYear($event.value)"</code> but it is not compatible with the component.</p>
  
  <p>Any idea what I can do?</p>