How to debounceTime in OnPush Component (stackblitz)?

Question

I am learning RXJS and have the following context:

Service:

import { Injectable } from '@angular/core';
import { BehaviorSubject, Observable, interval } from 'rxjs';
import { debounceTime, tap, debounce } from 'rxjs/operators';
 
@Injectable({ providedIn: 'root' })
export class SomeProvider {

  private counter: BehaviorSubject<number> = new BehaviorSubject(0);
  public counter$ = this.counter.asObservable() // .pipe(debounceTime(2000))

  constructor(
  ) {
    interval(1000).subscribe(value => {
      console.log(value);
      this.counter.next(value);
    })
  };

}

Component:

import { Component, ChangeDetectionStrategy } from '@angular/core';
import { SomeProvider } from './some.service';

@Component({
  selector: 'hello',
  template: `<h1>{{ provider.counter$ | async }}</h1>`,
  styles: [`h1 { font-family: Lato; }`],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloComponent  {

  constructor(public provider: SomeProvider) {

  }
}

Here is the stackblitz: https://stackblitz.com/edit/angular-ivy-cdvwnj

So question - right now the component updates counter in the component's template every second. I would like to simply debounce it using debounceTime. I thought it will be as easy as adding a pipe to Observable with debounceTime operator. But if I uncomment that change - counter is not even there.

Question:

how to apply debounceTime in this scenario correctly
why if we add pipe with debounceTime async pipe inside the template stops working (and requires additional change detection)?

abhay tripathi abhay tripathi · Accepted Answer · 2020-08-05T16:31:23

Instead of rewriting what is already written in docs, lets try to understand in simple layman language.

debounceTime() - It is a RxJs operator which listen for all the incoming data-stream for a given time-limit and only forwards the last one.

Example :-

MyAwesomeObservable().pipe(debounceTime(10000))

This means that debouncetime will not forward data-stream until 10secs elapsed. During that 10secs, if some new data-stream comes, debounceTime will again starts waiting for 10secs.

Your-Case :-

Since interval(1000) passes data every 1sec, debounceTime(2000) wait of 2sec never ends.

interval > debouncetime ,than your code will work.

How to debounceTime in OnPush Component (stackblitz)?

3 Answers